3

谁能帮我改变瀑布高图的行为以显示截图中的图表？

在此处输入图像描述

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

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

有什么建议么？

4

1 回答 1

0

我参加聚会有点晚了，但无论如何我都会给出我的解决方案。我对它并不完全满意，因为我觉得它很老套，但它确实能胜任。

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

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

您可以通过为 value 创建两个数据点来做到这一点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>

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

于 2021-03-16T14:45:56.993 回答