Highcharts速度表更換標籤

Question

我想實現車速表顯示互聯網帶寬速度，但我想改變它的數字順序。我搜索了很多，但找不到任何東西。

請在下面的代碼片段找到高圖表。我想更改標籤（數字）。在下面的例子中，序號是0,10,20,30，...，100。

但我的要求是數字序列應計0,1,5,10,20,30,40,50,60,70,80,90,100

檢查下面的圖片：
Highchart image

但是我的要求是數字順序應該是0,1,5,10,20,30,40,50,60,70,80,90,100

有什麼辦法可以改變數字嗎？

Highcharts.chart('container', { 
 

 
    chart: { 
 
     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: 100, 
 

 
      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: { 
 
       text: 'Mbps' 
 
      }, 
 
      plotBands: [{ 
 
       from: 0, 
 
       to: 60, 
 
       color: '#55BF3B' // green 
 
      }, { 
 
       from: 60, 
 
       to: 80, 
 
       color: '#DDDF0D' // yellow 
 
      }, { 
 
       from: 80, 
 
       to: 100, 
 
       color: '#DF5353' // red 
 
      }] 
 
     }, 
 
    series: [{ 
 
     name: 'Speed', 
 
     data: [80], 
 
     tooltip: { 
 
      valueSuffix: ' km/h' 
 
     } 
 
    }] 
 

 
}, 
 
// Add some life 
 
function (chart) { 
 
    if (!chart.renderer.forExport) { 
 
     setInterval(function() { 
 
      var point = chart.series[0].points[0], 
 
       newVal, 
 
       inc = Math.round((Math.random() - 0.5) * 20); 
 

 
      newVal = point.y + inc; 
 
      if (newVal < 0 || newVal > 200) { 
 
       newVal = point.y - inc; 
 
      } 
 

 
      point.update(newVal); 
 

 
     }, 3000); 
 
    } 
 
});

<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/highcharts-more.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

Answer 1

可以使用yAxis.tickPositions（API）指定特定的蜱位置。

你的情況：

yAxis: { 
    tickPositions: [0,1,5,10,20,30,40,50,60,70,80,90,100] 
} 

在你的榜樣，你有yAxis.labels.step設置爲2，需要被去除，這樣對你不跳過任何標籤的定義tickPositions（除非你想那是）。

請參閱this JSFiddle demonstration您的建議標籤。