Change the color of legend symbol highchart

问题

Is it possible to change the legend symbol color in Highcharts? For example demo example contains two series and the symbols in legend are in blue and black (same as the series).

I couldn't find any symbolColor param in the documentation. How do I change them both to say black?

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

回答1:

Add color for the legend in each series.

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

回答2:

The Highcharts 4.X source does look for a legendColor parameter for a series/point, however you can't (as far as I know) set it without it being a user option.

If you wrap the colorizeItem function of the Legend class you can set the legendColor attribute, and then utilize it quite easily. For example, wrap:

(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));

And usage in your chart options:

$('#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]
    }]
});

See this JSFiddle demonstration of how it looks.

回答3:

https://jsfiddle.net/bym59w2p/

The colors of the legend items are updated when the series color gets an update. However, the legend will not change until clicked upon. When adding this bit of code:

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

You are adding an empty data serie, which is not visible in the legend but does reset the legend area. Also by adding a duration to 1, you will not or hardly see the color change. Maybe this helps you or anyone else trying to find this answer.

See below for the plotOptions bit, or click the jsfiddle link above to see it in action.

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();
        	}
        }
    }
}

来源：https://stackoverflow.com/questions/36112858/change-the-color-of-legend-symbol-highchart

标签

javascript

jquery

Highcharts

legend