更改图例符号highchart的颜色

Question

可以在Highcharts中更改图例符号的颜色吗？ 例如， 演示示例包含两个系列，图例中的符号为蓝色和黑色（与系列相同）。

我在文档中找不到任何symbolColor参数。 如何将它们都说成黑色？

legend: {
    layout: 'vertical',
    floating: true,
    align: 'left',
    verticalAlign: 'top',
    x: 90,
    y: 45,
    symbolPadding: 20,
    symbolWidth: 50,
    symbolColor: '#000000' ?????
},

Answer 1

为每个系列中的图例添加color 。

series: [{color: '#000000',     //change here
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {color: '#000000',                   //change here
            data: [95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1]
        }]

JSFiddle

Answer 2

Highcharts 4.X源确实会为系列/点寻找legendColor参数，但是（据我所知）如果没有用户选项，则无法设置它。

如果包装了Legend类的colorizeItem函数，则可以设置legendColor属性，然后非常轻松地利用它。 例如，包装：

(function (H) {
    H.wrap(H.Legend.prototype, 'colorizeItem', function (proceed, item, visible) {
        item.legendColor = item.options.legendColor;
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    });
}(Highcharts));

以及图表选项中的用法：

$('#container').highcharts({
    series: [{
        legendColor: 'black',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

请参见此JSFiddle演示 ，以了解其外观。

Answer 3

https://jsfiddle.net/bym59w2p/

当系列颜色得到更新时，图例项的颜色也会更新。 但是，图例在单击之前不会改变。 添加以下代码时：

 this.chart.addSeries({ showInLegend: false }); this.chart.redraw(); } 

您正在添加一个空的数据序列，该序列在图例中不可见，但会重置图例区域。 此外，通过将持续时间加到1，您将看不到或几乎看不到颜色变化。 也许这对您或其他尝试找到此答案的人有帮助。

请参见下面的plotOptions位，或单击上面的jsfiddle链接以查看其运行情况。

 plotOptions: { series: { cursor: 'pointer', stacking: 'normal', animation: { duration: 1 }, events: { "afterAnimate": function () { var colorsArr = ['red','yellow','green']; var nameArr = ['test','test2','test3']; var countI; for(countI=0;countI<this.data.length;countI++){ switch(this.name){ case nameArr[0]: this.color = colorsArr[0]; this.data[countI].color = colorsArr[0]; break; case nameArr[1]: this.color = colorsArr[1]; this.data[countI].color = colorsArr[1]; break; case nameArr[2]: this.color = colorsArr[2]; this.data[countI].color = colorsArr[2]; break; } } this.chart.addSeries({ showInLegend: false }); this.chart.redraw(); } } } }