Question

我创建了带有渐变颜色的高图表饼图，问题是饼图的图例项目以渐变颜色显示。我希望传奇项目的颜色没有渐变。在执行此操作时，饼图的渐变应保持相同的任何建议。

这是我的代码：

/* Donut Chart */
    $(function () {
        colorsArray =['#AAE1FE', '#57C1FD', '#018BFD', '#0258E0','#002E77'];

        $('#pieChart').highcharts({
            credits: {
                enabled: false
            },
            chart: {
                type: 'pie',
                options: {
                    enabled: true,
                    alpha: 45
                },
                plotShadow: false 
            },
        colors:$.map(colorsArray,function (color) {
            return {
                radialGradient: { cx: 0.5, cy: 0.5, r: 0.5 },
                stops: [
                    [0, Highcharts.Color(color).brighten(-0.5).get('rgb')],
                    [0.5, Highcharts.Color(color).brighten(-0.3).get('rgb')],
                    [0.75, Highcharts.Color(color).brighten(-0.1).get('rgb')],
                    [1,Highcharts.Color(color).brighten(-0.5).get('rgb')]// darken
                ]
            };
        }),
         tooltip: {
             useHTML: true,
                     formatter: function() {
                        return this.point.name +'<br>' +'<b>'+ 'Share: ' + this.y +'%';
                    }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: false,
                    innerSize: '60%',
                    depth: 20,
                    size: '100%',
                    showInLegend: true ,
                    dataLabels: {
                        enabled: false
                    },
                    point: {
                        events: {
                            legendItemClick: function () {
                                return false; 
                            }
                        }
                    },
                    borderColor:'white',
                    borderWidth: '2px',
                    animation:false,
                    startAngle: 90,
                }
            },
        series: [{
            data: datapie,
            states: {
                hover: {
                    enabled: false
                }
            }
        }],
         legend: {
                layout: 'vertical',
                backgroundColor: 'white',
                align: 'right',
                verticalAlign: 'middle',
                x:-100,
                borderWidth: 1,
                borderRadius: 10,
                borderColor: '#eee',
                zIndex: 20,
                itemMarginTop: 5,
                itemMarginBottom: 5,
                labelFormatter: function () {
                    return this.name + ': ' + this.y + '%';
                }
            }
     });
     });

Answer 1

您可以wrap drawLegendSymbol然后在渲染器中操作颜色。

var colorsArray = ['#AAE1FE', '#57C1FD', '#018BFD', '#0258E0', '#002E77'],
    i = 0;

(function (HC) {
    HC.wrap(Highcharts.seriesTypes.pie.prototype, 'drawLegendSymbol', function (fn, legend, item) {

        var symbolHeight = legend.options.symbolHeight || legend.fontMetrics.f;

        this.chart.renderer.rect(
        0,
        legend.baseline - symbolHeight + 1, // #3988
        legend.symbolWidth,
        symbolHeight,
        legend.options.symbolRadius || 0).attr({
            zIndex: 3,
            fill: colorsArray[i]
        }).add(item.legendGroup);

        i++;

    });
})(Highcharts)

示例：http://jsfiddle.net/od69fb7y/1/

显示渐变颜色的Highcharts饼图图例项目

1 个答案: