Highchart 堆叠区域系列未正确显示

Question

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

情况 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 年下降。这不是期望的行为

情况二JSFIDDLE

我想实现的是以下情况：

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

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

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

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

Answer 1

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

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

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

Answer 2

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

我通过这个简单的更改修改了您的 fiddle（参见 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。希望对您有所帮助！

Highchart 堆叠区域系列未正确显示

Highchart stacked area series is not showing correctly

javascript

highcharts

stacked-area-chart

情况 1 - JSFIDDLE

情况二JSFIDDLE