Highcharts馅饼错误的传奇色彩

Question

[！[在此处输入图像说明] [1]] [1]

使用className设置颜色时，饼图的切片颜色和图例颜色不匹配。为（某些）其他图表执行此操作。

正如您在以下代码段中所看到的，饼图切片和Chrome的图例颜色不匹配。

＆＃13;

＆＃13;

// Build the chart
Highcharts.chart('container-donut', {
    chart: {
        type: 'pie'
    },
    plotOptions: {
        pie: {
            cursor: 'pointer',
            showInLegend: true,
        }
    },
    series: [{
        name: 'browsers',
        data: [
            { 
            	name: 'Chrome', 
            	y: 60 ,
              className: 'MyCustomColor'
            },
            { name: 'Internet Explorer', y: 5 },
            { name: 'Firefox', y: 5 },
            { name: 'Edge', y: 5 },
            { name: 'Safari', y: 5 },
            { name: 'Other', y: 5 }
        ]
    }]
});

＆＃13;

.MyCustomColor {
  fill: green;
}

＆＃13;

<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>



<div id="container-donut" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>


<div id="container-column" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的css未访问图例元素，<rect>

内的<g class="MyCustomColor">

将css更改为此可以解决您的问题：

.MyCustomColor, .MyCustomColor rect {
  fill: green;
}