ハイスピードメーターゲージ変更ラベル

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] 
} 

あなたがそれにしない限り、あなたはあなたの定義されたtickPositionsのための任意のラベルをスキップしないように削除する必要があり2からyAxis.labels.stepセットを、（持っています）です。

推奨ラベルのthis JSFiddle demonstrationを参照してください。