在上部区域具有自定义缩放比例的 Highcharts

Question

我想知道如何在 Highcharts 中实现图表的自定义比例。我想显示一个有很高胡须的箱线图。要显示的正常值在 500 到 1000 之间，但在 y 轴上有一些大约 6000 的异常值。这导致整个图表被挤压并且缩放比例太小以至于您无法正确确定箱线图。我想增加 1000 到 6000 之间的刻度大小以降低图表的高度。

Answer 1

Highcharts 提供的 breaks 功能似乎非常适合您的情况：https://api.highcharts.com/highcharts/yAxis.breaks

另一种方法是将 yAxis 类型更改为 logarithmic：https://api.highcharts.com/highcharts/yAxis.type

编辑

评论部分的讨论显示 OP 需要自定义 y 轴格式而不是 breaks 功能。

解决此问题的方法如下：

这里的问题是 Highcharts 中的轴只能有常量或对数刻度。您的示例显示不规则比例 - 值不是常数或对数顺序（[0, 3, 10, 30, 150]）。

以下是我为模仿那种外观和行为所做的工作：

我将 tickPositions 设置为 [0, 1, 2, 3, 4] - 这些是图表上显示的实际值。如您所见，所有这些数字之间的距离是恒定的：1。

然后我使用 formatter 显示每个标签的 ranges 数组中的相应数字。

  yAxis: {
    tickPositions: [0, 1, 2, 3, 4],
    labels: {
      formatter: function() {
        return ranges[this.pos];
      }
    }
  },

在将数据传递给图表构造函数之前，我转换了所有值，使它们介于 0 和 4 之间：

  series: [{
    data: [2, 120].map(function(val) {

      var range = findRange(val);

      var y = range.index + (val - range.low) / (range.high - range.low);

      return {
        y: y,
        originalValue: val
      };
    })
  }]

最后我在 tooltip.format 字符串中使用了 originalValue 属性来向用户打印转换前的数字。

  tooltip: {
    pointFormat: "<span style='color:{point.color}'>\u25CF</span> {series.name}: <b>{point.originalValue}</b><br/>"
  },

此示例已简化为线系列案例，但可以轻松调整为箱线图系列。代码仅供示例，有待改进，容易出错

实时工作演示： https://jsfiddle.net/kkulig/ytjz1jej/

API 参考文献：

在上部区域具有自定义缩放比例的 Highcharts

Highcharts with custom scaling in upper regions

javascript

boxplot

highcharts

编辑