自定义Highcharts图例符号 [英] Custom Highcharts legend symbol

问题描述

我想覆盖Highcharts中的图例符号.但是我看不到有任何方法可以做到这一点.

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

解决方案

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:

这篇关于自定义Highcharts图例符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！