Highcharts: 确保 y 轴 0 值在图表底部

Question

我正在网页上输出一系列的 Highcharts 图表。有时，指定时间段内的所有数据都可能返回值为 0。

这种情况下，图表看起来像这样：http://jsfiddle.net/charliegriefer/KM2Jx/1/

图表只有一个 y 轴标签，即“0”，并且它在图表的中间。

我想强制使 y 轴的 0 值在图表底部，这样就可以与页面上其他具有数据的图表保持一致。

已经尝试了各种 yAxis 属性，如“min: 0”、“minPadding: 0”、“maxPadding: 0”、“startOnTick: true”。

似乎应该很简单，但我无法解决 :(

相关的 yAxis 代码：

yAxis: {
    min: 0, 
    minPadding: 0, 
    startOnTick: true, 
    title: {
        text: ""
    }
},

- charliegriefer

Answer 1

我找到了另一个（非常简单的）解决方案：

您可以设置 y 轴的 minRange 属性：

yAxis: {
    ...
    minRange : 0.1
}

当所有数据为0时，这会使Highcharts渲染y轴的最小值和最大值。

更新：

Highcharts 4.1.9修复还需要：

        plotOptions: {
            line: {
                softThreshold: false
            }
        }

更新的 js fiddle

- BobTheBuilder

---

我不得不将这个与min函数结合起来，但结果非常好！这绝对是最佳答案，因为它不需要任何预处理。 - opsb

minRange + softThreshold 的效果非常好，这应该是被接受的答案。 - Rick Barkhouse

4.1.9 更新对我无效，如果您正在使用更新的 Highcharts，请使用 softMax 值：yAxis: { softMax: 10 }。 - Augie Gardner

Answer 2

我发现只有在提供yAxis的max值时，才能使图表正确显示。我认为这是HighCharts的问题，当你没有提供任何带有y值的数据元素时，它会绘制它认为最佳的图表。

- wergeld

---

我尝试更新小样例的x轴最大值，但是没有成功。图表仍然显示相同。感谢回答。不过在另一个答案中为我提供了有效的解决方法。 - charliegriefer

啊，是的。那确实解决了问题。非常棒。我仍需要对我的情况进行预处理，但这应该是正确的答案。谢谢！ - charliegriefer

没问题。我同意HighCharts库需要在这方面更加智能化。 - wergeld

我在从2.1.3更新时遇到了这种行为，这让我感到惊讶，因为之前没有出现过这样的问题。 - Mikhail

Answer 3

我也在HighCharts论坛上发布了这个问题，得到了一个看起来可行的答案。不幸的是，在呈现图表之前，我需要对数据进行一些预处理，以检查所有“0”数据值...但它可以工作。只是希望HighCharts中有更多“内置”的功能。

因此，在总结“y”值后，如果我得到0，则y轴属性应如下所示：

yAxis: {
    minPadding: 0, 
    maxPadding: 0,         
    min: 0, 
    max:1,
    showLastLabel:false,
    tickInterval:1,
    title: {
            text: ""
    }
}

参见：http://jsfiddle.net/KM2Jx/2/

关键在于“max”和“showLastLabel”属性。

- charliegriefer

Answer 4

我想到了一个解决方法，不需要对数据进行任何预处理，只需让highcharts像更新之前那样处理即可。这是一份修复代码：http://jsfiddle.net/QEK3x/

if(chart.yAxis[0].dataMax === 0)
{
   chart.yAxis[0].setExtremes(0, 5);
}

您只需要检查第一个系列轴，如果第一个不是0，则问题不会发生。我可能会向high-charts提交拉取请求，尽管我有点觉得他们出于某种原因想要这种功能。

- Ciarán

---

这个可以用，但会导致图表重新绘制。如果不想让它发生，似乎需要预处理数据，以确定是否需要设置 max 值。 - Luke Francl

这个逻辑对我有用。我稍微调整了一下，但原理相同： 如果(highChartConfig.series[0].data.dataMax == 0) { highChartConfig.yAxis[0].max = 50; } - Stu1986C

Answer 5

从Highcharts 5.0.1开始，您还可以使用softMax。

softMax：数字
轴的软上限。如果系列数据的最大值大于此值，则轴将保持在此最大值，但如果系列数据的最大值更高，则轴将弹性显示所有数据。

yAxis: {
    min: 0,
    softMax: 100,
    ...
}

这是一个带有柱状图的示例： http://jsfiddle.net/84LLsepj/ 请注意，目前在 Highcharts 5.0.7 中，并不是所有类型的图表都能正常工作。正如您在这个其他的 jsfiddle中看到的那样，它不能与折线图一起使用。

- Yorick

Answer 6

只需添加“min”选项

yAxis: {
   min: 0
}

- benjamingranados

---

如果您有负数，这将无法正常工作。它们不会显示。 - Mustafa

Answer 7

minRange：1或者您认为应以分数形式显示的任何值
softMax：100或者您认为应该是什么

yAxis: {
         minRange : 1,
         softMax: 100
       }

- Praveen

Answer 8

对于 Highcharts 5.x.x，您只需指定：

yAxis: {
  softMin: 0,
  softMax: 1,
};

这对于折线图不起作用，因为您还需要在上述相同的配置对象中设置minRange。尝试使用不同的值进行实验，例如定义minRange: 6，将在yAxis上创建一个范围，介于0和4之间。

- Maciej Gurban