Custom Highcharts legend symbol

问题

I want to override the legend symbols in Highcharts. But I cannnot see any way of doing this. The Highcharts Legend API has a "labelFormatter" function but nothing to format the symbol. My jsfiddle is here.

My code is:

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});

You can see the legend symbol for Tokyo is a blue circle with a line running through it. I want to override this with my own custom legend.

The Legend API allows you to set properties such as symbol width (symbolWidth), padding (symbolPadding) etc. But seeminlgy there is no way to actually replace the symbol.

There is a property "useHTML" which sounds useful. Any ideas?

EDIT The legend needs to change, but the marker on the graph should not

回答1:

You can use two series, connect them using linkedTo option, then for the main series, you can use image as symbol, for example:

$('#container').highcharts({
  series: [{
    data: [],
    id: 'main',
    marker: {
      symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
    }
  }, {
    linkedTo: 'main',
    data: [1, 3, -2, -4]
  }]
});

Demo: http://jsfiddle.net/hnc27nf2/

Screenshot:

来源：https://stackoverflow.com/questions/36302395/custom-highcharts-legend-symbol

标签

javascript

Highcharts