高图堆积区域系列未正确显示

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年就是这样做了。这不是理想的行为

情境2 JSFIDDLE

我想要达到的目标是：

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

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

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

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

Answer 1

由于您使用的是具有方形形状的面积图，因此您可以使用step属性（http://api.highcharts.com/highcharts/plotOptions.area.step）来实现此行为。这会使您的区域图表的边缘平滑（如您所希望的那样）以产生＆＃34;步骤＆＃34;效果。

我通过这个简单的改变修改了你的小提琴（参见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。我希望这有帮助！

Answer 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值，或者提出一些非常聪明的解决方案以摆脱正常行为。