如何强制高于最大值的点位于最大网格线上，但仍然在工具提示中显示实际值

Question

我正在绘制一个非常简单的折线图，其中包含每天的睡眠时间。所以小时在 y 轴上，日期在 x 轴上。 y 轴从 0 到 23，但有趣的值通常在 3 到 12 之间，所以我只想绘制这些值。这很简单，只需在 yaxis 上定义 min 和 max 即可。

但现在 highcharts 仍然会绘制高于和低于最小和最大 y 值的值。我想要的是让它在 12 最大网格线上绘制大于 12 的值，并在工具提示中显示实际值，而小于 3 的值则相反。

问题说明：https://jsfiddle.net/HhP39/10/

$(function () {
    $('#container').highcharts({
        chart: {},
        yAxis: {
          title: {
            text: 'Hours'
          },
        min: 3,
        max: 12,
        tickInterval: 1
      },
        series: [{
            data: [2,6,13,4,9,12,6,8,1,15,9,7,5,8,14,5,8,2,3]
        }]
    });
});

如您所见，如果您将鼠标悬停在超出范围的值（例如 2）上，它们仍会产生工具提示。我希望像这样的所有值都移动到最小和最大线上。

有人有什么想法吗？

Answer 1

看看您的 fiddle 的更新：https://jsfiddle.net/HhP39/7/

它正在创建一个原始值数组，然后是一个调整后值数组。该图实际上绘制了调整后的值，但工具提示来自原始值。

data = [2,6,13,4,9,12,6,8,1,15,9,7,5,8,14,5,8,2,3];
series = [];
tooltips = [];
for (var i in data) {
    tooltips.push(data[i]);
    series.push( Math.max(3, Math.min(data[i], 12)) );
}

然后绘制图表：

$('#container').highcharts({
    chart: {},
    yAxis: {
      title: {
        text: 'Hours'
      },
    min: 3,
    max: 12,
    tickInterval: 1
  },
    tooltip: {
        formatter: function() {
            return ('Real value: ' + data[this.x]);
        }
    },
    series: [{
        data: series
    }]
});

如何强制高于最大值的点位于最大网格线上，但仍然在工具提示中显示实际值

How to force points above maximum to be on maximum grid line, but still show real value in tooltip

highcharts