Question

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

我无法在文档中找到任何legend: { layout: 'vertical', floating: true, align: 'left', verticalAlign: 'top', x: 90, y: 45, symbolPadding: 20, symbolWidth: 50, symbolColor: '#000000' ????? },参数。如何将它们都改为黑色？

{{1}}

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参数，但是你不能（据我所知）设置它而不是用户选项。

如果您打包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 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();
        	}
        }
    }
}

更改图例符号高图的颜色

3 个答案: