1年的highcharts x轴显示年份+1的刻度/标签

Posted 2023-03-14

【中文标题】1年的highcharts x轴显示年份+1的刻度/标签

【英文标题】：highcharts x-axis for 1 year displays tick/label of year +1

【发布时间】：2014-08-14 05:41:09

【问题描述】：

我有一个带有 x 轴一整年的​​ highcharts 柱形图。它的类型是datetime，它的min/max是从2014-01-01到2014-12-31。

为什么会显示 2015 年 1 月 的刻度/标签？

完整来源http://jsfiddle.net/nkjm2691/1/

我尝试了很多方法，例如将结束日期设置为 Date.UTC(2014, 11, 31, 23, 59, 59) 并尝试使用 tickInterval。我最终需要的是每月刻度（即不规则间隔）和刻度之间的标签。仅当图表具有固定宽度时，才可以使用一些巫术逻辑来计算偏移量。

令人惊讶的是，使用areaspline 类型的图表或多或少地做同样的事情可以正常工作：http://jsfiddle.net/fm86v8fe/

我还检查了一些相关的 SO 问题，例如 Is there a reliable way to have a 1 month auto generated tick interval with high charts? 和 HighCharts xAxis - tickInterval for month，但它们并没有解决我的问题。

【参考方案1】：

您发布了this JSFiddle。只需从 type: 'column' 更改为 type: 'line' 即可删除他的标签。为什么？

这是因为任何“柱状”图表类型都有pointRange。这取决于上下文的不同定义，但对于您的 datetime x 轴，它是 (API)：

在线性和日期时间轴上，范围将计算为两个最近数据点之间的距离。

正是这个pointRange 使您的列具有特定的宽度。它们在 x 轴上有一个跨度。正如您在图表中看到的那样，每列都有一周的范围，而不仅仅是一毫秒（折线图和类似情况就是这种情况）。

据我了解，这会导致 Highcharts 占用一些额外空间以更好地适应图表点的点范围。

您可以做几件事。您可以像这样手动覆盖pointRange：

series:  pointRange: 1, data: ... 

这将使每列只有 1 毫秒厚，并删除标签。您可以使用pointWidth 固定宽度：

series:  pointRange: 1, pointWidth: 10, data: ... 

但请注意，这是静态的，因此如果列突然靠得太近，它们就会开始重叠。 Here's a JSFiddle demonstration.

您也可以什么都不做，只需将max 设置为足够远，以便pointRange 不包含太多额外空间，如下所示：

xAxis:  min : Date.UTC(2014, 0, 1), max : Date.UTC(2014, 11, 28) 

请注意，在 12 月 29 日之后，Highcharts 似乎会增加更多空间。不幸的是，我不确定这个间距是如何选择的（29 号是星期一..？）。

Sebastian 提出了一些完全不涉及此类操作的解决方案。选择的“解决方案”取决于图表的其他要求和所需行为。

【讨论】：

最适合我的是使用pointRange: 1 和pointWidth 的动态值。

【参考方案2】：

将最大日期设置为 1.12，删除时间并将 maxPadding 设置为 0 值。如果您使用 tiem (23:59:59)，则无法正确计算刻度间隔。第二种解决方案是使用tickPositioner

https://jsfiddle.net/nkjm2691/50/

【讨论】：

"将最大日期设置为 1.12" - 嗯，不，这违反了显示一整年的要求。我需要 12 个月，而不仅仅是 11 个月。如果我修改你的小提琴以使用最大日期 31.12，它会显示同样的问题。另外，您知道为什么我的区域样条示例不会因此受到影响吗？