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

Highcharts same legend color as of the pie chart slice color

本文关键字:颜色 切片 Highcharts      更新时间:2023-09-26

嗨,我正在制作高图饼状图,我正在显示图表的传奇。我想显示图例的颜色与每个切片的颜色相同。目前每个图例的颜色是相同的。这是我的代码

 <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中是否有选项可以显示与饼状切片相同的颜色的图例或任何其他方式来做到这一点

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

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

查看我的工作提琴在这里