在上部区域使用自定义缩放的Highcharts

Question

我想知道如何在Highcharts中为图表实现自定义比例。我想要显示一个有很高胡须的盒子图。要显示的正常值介于500和1000之间，但有一些异常在y轴上约为6000。这会导致整个图表被挤压，缩放比例很小，无法正确确定箱图。我想增加1000到6000之间的刻度尺寸以减少图表的高度。

Answer 1

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

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

修改

评论部分的讨论表明，OP需要相对于breaks功能的自定义y轴格式。

以下是解决此问题的方法：

这里的问题是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
      };
    })
  }]

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

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

此示例简化为系列案例，但可以轻松调整为boxplot系列。该代码仅用于示例目的，应该进行改进 - 很容易在其中引起错误。

实时工作演示： 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