javascript - Highchart 仪表 : How to change tick position

Question

我正在实现 Highchart 仪表(速度计)来显示互联网带宽速度。我希望点按以下顺序显示 [0,1,2,5,10,25,50,100,500]。但如果我使用这个序列，我的车速表看起来像下面的屏幕截图

我无法在点之间留出空间。有没有办法像下图一样绘制等距离的点

Here is the jsfiddle that illustrates the problem.

highchart gauge jsfiddle

Answer 1

正如 Makarand Patil 所说，对数轴是必要的。

要实现这一目标并将刻度放在所需的位置，您可以使用以下 yAxis 选项:

yAxis: {
  min: 1,
  max: 500,
  type: 'logarithmic',
  minorTickInterval: 'auto',
  tickPositions: [0, Math.log10(2), Math.log10(5), Math.log10(10), Math.log10(25), Math.log10(50), Math.log10(100), Math.log10(500)],
  ...

另请注意，图中的每个值都需要 > 0。如果分配 0 值，则会失败。我更改了数字生成以在示例中考虑到这一点。

工作示例: http://jsfiddle.net/8cz9m9c8/33/

yAxis.type 上的 API: https://api.highcharts.com/highcharts/yAxis.type

<小时/>

更新以回答有关首先显示 0 的评论。

要在图表中显示 0，我们需要作弊，因为对数轴没有 0 值。我让零看起来像这样:

yAxis: {
  min: 0.499,
  tickPositions: [Math.log10(0.5),Math.log10(1), Math.log10(2), Math.log10(5), Math.log10(10), Math.log10(25), Math.log10(50), Math.log10(100), Math.log10(500)]
  labels: {
    formatter: function() {
      if(this.value === 0.5){
        return 0;
      } else {
        return this.value;
      }
    }
  },
  ...
}

基本上，我们将 0.5 设置为 0，因为我们不希望 0 到 1 之间的值填充图表的太多内容。然后我们更改轴上的标签，以便表示 0.5 的标签将梗塞表示 0。

并不是说该图中的值需要在 0.5 到 500 之间。我们将 0.5 近似为 0。

工作示例: http://jsfiddle.net/8cz9m9c8/36/

工作示例，带有固定箭头: http://jsfiddle.net/8cz9m9c8/37/