高图表：如何改变刻度位置

Question

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

我无法在点之间留出空间。有没有办法将点绘制在相同的距离，如下面的图像

Here is the jsfiddle that illustrates the problem.

highchart gauge jsfiddle

Answer 1

您必须在type: 'logarithmic'中使用yAxis: {...}来调整各点之间的空间，并进行各种其他逻辑更改。

用相似类型的高图来看这个小提琴：http://jsfiddle.net/5x8cmvy7/。

Answer 2

正如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/