Highcharts 创建自定义 yAxis 标签

Highcharts create custom yAxis labels

提问人:koby 提问时间:9/20/2023 更新时间:9/21/2023 访问量:28

问:

我想创建以下图表示例,x轴和线条没有问题 - 这已经完成了。但是我只是无法让自定义 yAxis 标签配置开始工作。有人可以举个例子来说明如何使用 highcharts 做到这一点吗?

Highchart Example

我在我的 Axis 选项中尝试了这样的东西,但没有让它像示例图片中那样工作:

yAxis: {
  tickPositioner() {
    return [1e-8, 0.000001, 0.0001, 0.01, 1, 100, 10000];
  },
  min: 0,
  labels: {
    reserveSpace: true,
    formatter() {
      return this.value;
    },
  },
}

上面代码的结果是这样的:

Example result image of highcharts

奇怪的是,该代码非常接近上面的例子:

tickPositions: [-8, -7, -4, -2, 0, 1, 2, 4],
tickPositioner: null,

注意:这里很难提供示例小提琴,因为我为此提供的系列是非公开的,数据集可能是 4000-8000 点。

javascript 图表 highcharts yaxis

评论


答:

1赞 ppotaczek 9/21/2023 #1

这是 y 轴类型的完美用例。logarithmic

您可以通过以下方式启用该选项:

  yAxis: {
    type: 'logarithmic'
  }

但是,要显示负值,您需要添加一个小扩展。有用的线程: https://www.highcharts.com/forum/viewtopic.php?t=49524


现场演示:https://jsfiddle.net/BlackLabel/9pgujcyd/

文档:https://www.highcharts.com/docs/chart-concepts/axes#logarithmic

API 参考:https://api.highcharts.com/highcharts/yAxis.type

评论

0赞 koby 9/25/2023
好的,这个提示非常有用,使用对数轴类型,我至少可以得到一个图表居中的视图,但数字很高。我怎样才能管理我的起点是 1e-8 而最大点是 10000?我尝试了许多使用 Tick Intervals 和 tickPositioner 的示例,但我不明白如何真正设置静态标签,就像第一个示例屏幕截图一样。
1赞 ppotaczek 9/25/2023
嗨,@koby,请在此问题中检查并添加您的潜在评论: github.com/highcharts/highcharts/issues/17364 您可以通过使用,例如:jsfiddle.net/BlackLabel/96qazg0rMath.log10