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

Posted 2023-02-16

【中文标题】Highcharts 与饼图切片颜色相同的图例颜色

【英文标题】：Highcharts same legend color as of the pie chart slice color

【发布时间】：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

【参考方案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