【问题标题】:Highcharts same legend color as of the pie chart slice colorHighcharts 与饼图切片颜色相同的图例颜色
【发布时间】:2015-12-27 01:13:49
【问题描述】:

嗨,我正在研究 highcharts 饼图,我正在用图表显示图例。我想显示与每个切片颜色相同的图例颜色。目前每个图例颜色都是相同的。 这是我的代码

 <script src="text/javascript">
      Highcharts.theme = {
         colors: ['#058DC7', '#50B432', '#FFC000', '#ED561B', '#DDDF00', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
        chart: {
            backgroundColor: {
                linearGradient: [0, 0, 500, 500],
                stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(240, 240, 255)']
                ]
            }
        }
    }; 

var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

        var chart;

        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'holdingPie',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                spacingBottom: 0,
                margin: [0, 0, 0, 40]
            },
            title: {
                text: ''
            },
            credits: {
                enabled: false
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.point.name + '</b>: ' + roundNumber(this.percentage, 2) + ' %' + ' of total holding value';
                },
                style: {
                    fontSize: '11px'
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            legend: {
                enabled: true,
                layout: 'vertical',
                float: true,
                style: {
                    left: '0px',
                    bottom: 'auto',
                    right: 'auto',
                    top: '0px',
                    margin: '0px',
                    padding: '5px'
                }
            },
            series: [{
                    type: 'pie',
                    name: 'Holdings'
  <?php piedata(); ?>
                   }]
          });
}

piedata() 是从数据库中获取数据的函数。 我已经搜索过了,但找不到任何相关的东西。 highchart api中是否有任何选项可以显示与饼图相同颜色的图例或任何其他方式。

【问题讨论】:

  • 默认情况下,图例应将其系列图标显示为与切片相同的颜色。你能设置一个有代表性的jsFiddle或者显示你的数据集的内容吗?
  • @Saif Alvi 请用问题绑定一个jsfiddle

标签: javascript highcharts legend pie-chart


【解决方案1】:

使用您的代码,我创建了一个小提琴。我使用了另一个小提琴的数据,因为您的数据不在这里。我所做的另一项更改是,在图例中,我只启用了:true 并删除了所有样式。你的传说出现在馅饼上,这可能是你的传说的颜色可能无法区分的原因。

 legend: {
            enabled: true /*,
            layout: 'vertical',
            float: true,
            style: {
                left: '0px',
                bottom: 'auto',
                right: 'auto',
                top: '0px',
                margin: '0px',
                padding: '5px'
            }*/
        }

见我的the working Fiddle here

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-05-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多