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

Question

Hi i am working on highcharts pie chart, i am showing legend with the chart. i want to show legend color same as of the each slice color. currently each legend color is same. here is my code

 <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() is the function that gets data from database. i have searched it but could not find anything relevant. Is there any option in highchart api to show legend in same color as of the pie slice or any other way to do this.

Answer 1

Using your code , I have created a fiddle. I used data from another fiddle as your data was not here. One more change I made is that , in legends I kept enabled:true only and removed all styles. Your legends were coming on the pie that could be the reason your legend's color might not be distinguished .

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

See my the working Fiddle here