我用的cdn，因为瀑布图属于更多的图表类型，导入了另一个链接：
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts-more.js"></script>将图表类型设置为瀑布图：
chart: {
type: 'waterfall'
},或者在数据列中设置也可，主要就是数据列符合数据格式即可：
series: [
{
name: '体重',
type: 'waterfall',
data: [
{
name: '我的体重',
y: 200,
},
{
name: '她的体重',
y: 110,
color: 'rgb(241,92,168)', // 设置这根柱子的颜色
},{
name: '合计体重',
isIntermediateSum: true, // 它没有y值，它的值是以前数据点的总和
color: 'rgb(144,237,125)',
},{
name: '她要减去的体重',
y: -10,
color: 'rgb(241,92,168)',
},{
name: '我要减去的体重',
y: -20
},{
name: '最后剩下的体重',
isSum: true, // 它也没有y值，它的值等于所有数据点的值总和
color: 'rgb(144,237,125)',
}
]
},
]以上就可以渲染一个瀑布图了，也可以再添加一点配置：
title: {
text: '我们的体重' // 不用解释，图表标题
},
legend: {
enabled: false, // 图例不显示
},
credits: {
enabled: false, // 版权信息不显示
},
xAxis: {
type: 'category', // x轴为分类轴，会从数据点的name属性找值
},
yAxis: {
title: {
enabled: false, // 不用解释，y轴标题
},
labels: {
formatter: function () {
return this.value + '斤'; // 格式化一下y轴的标签数据
}
}
},
plotOptions: {
waterfall: { // 给瀑布图设置一些配置项
borderWidth: 0, // 柱子边框宽度0
dataLabels: { // 数据标签的一些配置
enabled: true,
inside: false,
verticalAlign: 'top',
y: -25,
style: {
color: '#fff',
fontWeight: 'normal',
},
formatter: function () {
return this.y + '斤'
}
}
}
},说两句笔主的收获：
- x轴为分类轴，
xAxis.type: 'category', 默认坐标轴标签会去数据点的name中找出来显示，xAxis.categories: []，则会在数组中找 - 瀑布图，就是柱状图，柱子的起点不一致
最终效果：
完整文件（缩进有点问题，不想调整了 :）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts-more.js"></script>
<title></title>
</head>
<body>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
Highcharts.chart('container', {
title: {
text: '我们的体重'
},
legend: {
enabled: false,
},
credits: {
enabled: false,
},
xAxis: {
type: 'category',
},
yAxis: {
title: {
enabled: false,
},
labels: {
formatter: function () {
return this.value + '斤';
}
}
},
plotOptions: {
waterfall: {
borderWidth: 0,
dataLabels: {
enabled: true,
inside: false,
verticalAlign: 'top',
y: -25,
style: {
color: '#fff',
fontWeight: 'normal',
},
formatter: function () {
return this.y + '斤'
}
}
}
},
series: [
{
name: '体重',
type: 'waterfall',
data: [
{
name: '我的体重',
y: 200,
},
{
name: '她的体重',
y: 110,
color: 'rgb(241,92,168)',
},{
name: '合计体重',
isIntermediateSum: true,
color: 'rgb(144,237,125)',
},{
name: '她要减去的体重',
y: -10,
color: 'rgb(241,92,168)',
},{
name: '我要减去的体重',
y: -20
},{
name: '最后剩下的体重',
isSum: true,
color: 'rgb(144,237,125)',
}
]
},
]
});
</script>
</body>
</html>遇到的坑：
Highcharts Error #17 图表类型不支持，cdn有问题，没导入更多图表类型的js文件吧:)
