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

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

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

编辑

breaks 功能。

以下是如何解决这个问题:

这里的问题是,高图中的轴只能具有常数或对数尺度。您的示例显示了不规则比例-值不是按常数或对数顺序([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
      };
    })
  }]

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

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

该示例简化为直线序列情况,但可以轻松调整为箱线图序列。该代码仅用于示例目的,应该加以改进-很容易在其中引起错误。

现场工作演示: https://jsfiddle.net/kkulig/ytjz1jej/

API参考:

• https://api.highcharts.com/highcharts/tooltip.pointFormat
• https://api.highcharts.com/highcharts/yAxis.tickPositions
• https://api.highcharts.com/highcharts/xAxis.labels.formatter