更改图例符号highcharts的颜色

Question

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

我在文档中找不到任何symbolColor param。我怎么改变他们说黑色？

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

Answer 1

Highcharts 4.X源确实为一个系列/点寻找legendColor参数，但是你不能（据我所知）设置它而不是它是一个用户选项。

如果你包装了colorizeItem类的Legend函数，你可以设置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]
    }]
});

请参阅this JSFiddle demonstration了解它的外观。

Answer 2

为每个系列中的图例添加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 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();
        	}
        }
    }
}