Highcharts 堆叠区域系列未正确显示答案

【问题标题】：Highchart stacked area series is not showing correctlyHighcharts 堆叠区域系列未正确显示
【发布时间】：2017-08-04 10:17:17
【问题描述】：

我遇到了一个非常有趣的情况，我认为这在使用堆积面积图时很常见。

情况 1 - JSFIDDLE

我目前的情况：

我使用的系列如下：

series: [{
    name: 'test1',
    data: [113864, 113864, 113864, 0, null, null, null],
    color: '#4E80BC'
}, {
    name: 'test2',
    data: [null, null, null, 87905, 87905, 87905, 87905],
    color: '#E46C0A'
}, {
    name: 'test3',
    data: [null, null, null, 14211, 14211, 14211, 14211],
    color: '#B8B8B8'
}]

您看到 test1 从 113864 下降到 0，但它从 2024 年到 2028 年下降。这不是预期的行为

情况 2 JSFIDDLE

我想要实现的是以下情况：

这样做的问题是我只能通过使用以下系列数据来实现这种情况：

{
      name: 'test1',
      data: [113864, 113864, 113864, 113864, null, null, null],
      color: '#4E80BC'
}

因此我不得不在意甲中添加另一个 113864。这是不可能的，因为我没有那个选项。我无法再次添加 113864。所以我的问题是，有谁知道我如何在不更改系列数据的情况下解决这个问题？

PS。另请注意，使用条形图作为解决方案会弄乱工具提示，因为它会为每个条显示一个工具提示，而不是整个区域

【问题讨论】：

标签： javascript highcharts stacked-area-chart

【解决方案1】：

由于您使用的是正方形面积图，因此您可以使用step 属性 (http://api.highcharts.com/highcharts/plotOptions.area.step) 实现此行为。这使您的面积图的边缘形成正方形，以产生（正如您从其名称中所期望的那样）“阶梯”效果。

我用这个简单的改变修改了你的小提琴（见http://jsfiddle.net/brightmatrix/fnove341/5/）。

    plotOptions: {
        series: {
            fillOpacity: 1,
            stacking: 'normal'                
        },
        column: {
            pointPadding: 0,
            groupPadding: 0,
            borderWidth: 0, // < set this option
            connectNulls: false
        },
        area: {
            step: 'left' /* added to prevent test1 series from dropping off before 2028 */
        }
    },

您的图表现在将按预期显示，而无需将值 0 更改为 null。我希望这会有所帮助！

【讨论】：

【解决方案2】：

通过设置data: [113864, 113864, 113864, 0, null, null, null],，你说的是point 1 = 113864、point 2 = 113864、point 3 = 113864、point 4 = 0，之后就没有更多的点了。

虽然不希望，但这是意料之中的。如果你设置了point 4 = null，那么它会在你期望的地方剪掉。

因此，您要么必须将代码中的所有 0 值替换为 null，要么想出一些非常聪明的解决方案来摆脱正常行为。

【讨论】：