Highcharts与饼图切片颜色相同的图例颜色

时间:2015-09-29 13:59:18

标签: javascript highcharts legend pie-chart

您好我正在使用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中是否有任何选项可以显示与饼图相同颜色的图例或其他任何方式。

1 个答案:

答案 0 :(得分:1)

使用你的代码,我创造了一个小提琴。我使用了另一个小提琴的数据,因为你的数据不在这里。我做的另一个改变是,在传说中我保持启用:仅真实并删除所有样式。你的传说即将出现,这可能是你的传奇色彩可能无法区分的原因。

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

查看我的the working Fiddle here