如何在量表創建後更改高度表上的「標籤」（valueSuffix）？

Question

如何在量表創建後更改高度表上的「標籤」（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爲y軸標題可能。然後你可以使用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); 
});