Question

我正在画一个非常简单的折线图，每天睡几个小时。所以小时在y轴上，日期在x轴上。 y轴从0到23，但有趣的值通常在3到12之间，所以我只想绘制这些值。这很容易，只需在y轴上定义最小值和最大值。

但是现在highcharts仍然会在最小和最大y值之上和之下绘制值。我想要的是让它只在12最大网格线上绘制大于12的值，并在工具提示中显示实际值，并在3以下显示值的倒数。

$(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

看看这个更新你的小提琴：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
    }]
});

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

1 个答案: