谁能帮我改变 waterfall highchart 的行为以像屏幕截图中那样显示图表?
其实我知道 isSum 和 isIntemediateSum 属性。使用它我可以在 y 轴为 0 的瀑布中开始一些列。
但这会忽略分配的 y 轴值,并根据之前的系列自行计算。
有什么建议吗?
最佳答案
我来晚了一点,但无论如何我都会给出我的解决方案。我对它并不完全满意,因为我觉得它很老套,但它确实可以。
假设您想在瀑布图上绘制 4 个值:
A
从0
开始到10
B
开始于10
结束于20
C
从0
开始到25
D
开始于25
结束于35
您可以通过为值 C
创建两个数据点来做到这一点:
- 第一个将是不可见的(将属性
visible
设置为true
)并且 y 值为-20
- 第二个是标准的: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>
如果有人可以对此进行改进,我会很高兴,我发现它太复杂了,不是一个理想的解决方案。
关于highcharts - Waterfall Highchart 在 y 轴为 0 的系列之间开始一些列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37453875/