highcharts - 创建仪表后，如何更改 highcharts 仪表上的“标签”（valueSuffix）？

Question

创建仪表后，如何更改 highcharts 仪表上的“标签”（valueSuffix）？

像这样的东西：

chart.series[0].remove();
chart.addSeries({
    name: 'Speed',
    data: [Math.random() * 200],
    tooltip: {
        valueSuffix: parseInt(Math.random() * 200, 16)
    }
});

http://jsfiddle.net/noahpeters/d36Se/1/

Answer 1

是的，可以使用 html 作为 yAxis 标题。然后就可以用jquery或者js来改变div的内容了。

http://jsfiddle.net/d36Se/2/

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        type: 'gauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false
    },

    title: {
        text: 'Speedometer'
    },

    pane: {
        startAngle: -150,
        endAngle: 150,
        background: [{
            backgroundColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops: [
                    [0, '#FFF'],
                    [1, '#333']
                ]
            },
            borderWidth: 0,
            outerRadius: '109%'
        }, {
            backgroundColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops: [
                    [0, '#333'],
                    [1, '#FFF']
                ]
            },
            borderWidth: 1,
            outerRadius: '107%'
        }, {
            // default background
        }, {
            backgroundColor: '#DDD',
            borderWidth: 0,
            outerRadius: '105%',
            innerRadius: '103%'
        }]
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 200,

        minorTickInterval: 'auto',
        minorTickWidth: 1,
        minorTickLength: 10,
        minorTickPosition: 'inside',
        minorTickColor: '#666',

        tickPixelInterval: 30,
        tickWidth: 2,
        tickPosition: 'inside',
        tickLength: 10,
        tickColor: '#666',
        labels: {
            step: 2,
            rotation: 'auto'
        },
        title: {
            useHTML:true,                text: '<div id="tooltipTitle">km/h</div>'
        },
        plotBands: [{
            from: 0,
            to: 120,
            color: '#55BF3B' // green
        }, {
            from: 120,
            to: 160,
            color: '#DDDF0D' // yellow
        }, {
            from: 160,
            to: 200,
            color: '#DF5353' // red
        }]
    },

    tooltip: {
        formatter: function(){
        return 'aaa';
        }
        //valueSuffix: ' km/h'
    },
    series: [{
        name: 'Speed',
        data: [80]
    }]

},
// Add some life
function (chart) {
    setInterval(function () {
        chart.series[0].remove();
        chart.addSeries({
            name: 'Speed',
            data: [Math.random() * 200]
        });

        $('#tooltipTitle').html('aaaa');
    }, 3000);
});