highcharts - Waterfall Highchart 在 y 轴为 0 的系列之间开始一些列

Question

谁能帮我改变 waterfall highchart 的行为以像屏幕截图中那样显示图表？

其实我知道 isSum 和 isIntemediateSum 属性。使用它我可以在 y 轴为 0 的瀑布中开始一些列。

但这会忽略分配的 y 轴值，并根据之前的系列自行计算。

有什么建议吗？

Answer 1

我来晚了一点，但无论如何我都会给出我的解决方案。我对它并不完全满意，因为我觉得它很老套，但它确实可以。

假设您想在瀑布图上绘制 4 个值:

• A 从 0 开始到 10
• B 开始于 10 结束于 20
• C 从 0 开始到 25
• D 开始于 25 结束于 35

您可以通过为值 C 创建两个数据点来做到这一点:

1. 第一个将是不可见的(将属性 visible 设置为 true)并且 y 值为 -20
2. 第二个是标准的:y-value = 25

隐形条会将您的瀑布当前总和恢复为 0，但不会出现在您的图表上。

这是我的代码:

Highcharts.chart('container', {
    chart: {
        type: 'waterfall'
    },
    title: {
        text: 'Highcharts Waterfall'
    },
    xAxis: {
        type: 'category'
    },
    legend: {
        enabled: false
    },
    series: [{
        upColor: Highcharts.getOptions().colors[2],
        color: Highcharts.getOptions().colors[3],
        data: [
        {y: 10, name: "A", color: "#6a329f"}, 
        {y: 10, name: "B", color: "#6a329f"}, 
        {y: -20, name: "C", visible: false, color: "#f44336"}, 
        {y: 25, name: "C", color: "#f44336"}, 
        {y: 10, name: "D", color: "#6a329f"}],
    }]
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>

如果有人可以对此进行改进，我会很高兴，我发现它太复杂了，不是一个理想的解决方案。