如何用 highcharts 画柱状图, 多柱子叠加, 提示框, 以及柱子高度标识
使用场景
需求是图表表达每日睡眠的各时间段占比(深睡, 潜睡, 清醒), 并将不同日期进行横向比较
针对这种类似的场景, 用叠加柱状图正好, 既能够体现出每天睡眠时长的变动情况, 也能够直观的反映出每天的各种睡眠阶段的占比情况
部分属性解释
xAxis
x轴: 数据内容, 如日期, 用户, 分组名称等
注意: 这个长度应该要和series.data中的数据长度对应的
yAxis
y轴: 就是柱子高度的含义, 在这里是时长
series
-
在这里(series.data`)放柱子的长度信息
例如:
series: [{
name: '深睡时长',
data: [200, 230, 400, 190, 230]
}
title
标题
subtitle
副标题
tooltip
提示工具, 就是鼠标移动过去弹出的那个框, 这里可以使用html来处理样式
例如:
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}分钟</b> ({point.percentage:.0f}%)<br/>',
shared: true
}
legend
图例说明, 说明每个颜色的柱子表达的是什么, 一般在图标的上部, 下部, 或者右上角
plotOptions
图例选项, 我们这里是柱状图, 主要关注plotOptions.column就ok了, 这里主要是给柱子一些标识, 或者了一些功能等
例如:
plotOptions: {
column: {
stacking: '时间',
dataLabels: {
enabled: true,
color: '#4f4f4f',
style: {
fontWeight:'normal',
fontSize: '12px',
"textShadow": 'none'
}
}
}
}
exporting
输出, 打印相关exporting.enabled用来设置是否显示‘打印’,'导出’等功能按钮，不设置时默认为显示
:{
enabled:false
}
关键代码
叠加柱子
plotOptions: {
column: {
stacking: '时间'
}
}
标记柱子长度
plotOptions: {
column: {
dataLabels: {
enabled: true
}
}
}
源代码
代码说明: 里面的数据是动态的, 从后台拿的, 需要根据自己的情况做修改
这里列出一些需要修改的地方
- x轴
xAxisCategories- y轴名称
yAxisSuffix- 标题
title- 副标题
subTitletooltip中的提示内容- 柱子的数据
series
整图参考
柱子颜色可自己定义
js代码
$('#'+containerId).highcharts({
chart: {
height:charHeight,
type: 'column'
},title: {
text: title,
x:-20
},
subtitle: {
text: subTitle,
x: -20
},
xAxis: {
categories: xAxisCategories,
tickInterval: step
},
yAxis: {
title: {
text: yAxisSuffix,
style: {
color: "#4d759e",
fontWeight: "normal",
fill: "#4d759e"
}
},
//plotLines: plotLines
},
legend: {
enabled: true,
useHTML: true,
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'right',
verticalAlign: 'top',
floating: true,
x: 0,
y: -10
},
credits: {
text: '', // 设置LOGO区文字
href: '' // 设置LOGO链接地址
},
exporting:{
enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
},
plotOptions: {
column: {
stacking: '时间',
dataLabels: {
enabled: true,
color: '#4f4f4f',
style: {
fontWeight:'normal',
fontSize: '12px',
"textShadow": 'none'
}
}
},
series: {
marker: {
enabled: true,
states: {
hover: {
enabled: true
}
}
},
//控制图标的图例legend不允许切换
events: {
legendItemClick: function (event) {
return false;
}
}
}
},
tooltip: {
//shared: true,
crosshairs: true,
valueSuffix: yAxisSuffix,
useHTML: true,
formatter: function() {
return "<div style='width:300px;word-wrap:break-word;white-space:normal;'>"
+"<b>录入时间: "+tipsbean[0][this.series.data.indexOf(this.point)].medDate+"</b><br/>"
+tipsbean[1][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[1][this.series.data.indexOf(this.point)].medResult+"<br/>"
+tipsbean[2][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[2][this.series.data.indexOf(this.point)].medResult+"<br/>"
+tipsbean[3][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[3][this.series.data.indexOf(this.point)].medResult+"<br/>"
+tipsbean[0][this.series.data.indexOf(this.point)].itemName+":"+tipsbean[0][this.series.data.indexOf(this.point)].medResult+"<br/>"
+"</div>";
}
},
series: [
{
name: attrs[1],
data: dataBean['areaDatas'][1],
marker: {
fillColor: 'white',
lineWidth: 1,
lineColor: Highcharts.getOptions().colors[1]
}
},{
name: attrs[2],
data: dataBean['areaDatas'][2],
marker: {
fillColor: 'white',
lineWidth: 1,
lineColor: Highcharts.getOptions().colors[2]
}
},{
name: attrs[3],
data: dataBean['areaDatas'][3],
marker: {
fillColor: 'white',
lineWidth: 1,
lineColor: Highcharts.getOptions().colors[3]
}
}
]
});