话不多说,先上效果图:
今天接到一个需求,项目中加个在线率统计,
柱状图表示各区的在线率,同时显示一个折线,表示全市的平均值,
用于各区与全市平均的对比,是高于平均还是低于平均。
去官网搜了下,混合图表,也能满足我的需求,但有些差别,
混合图双坐标代表的是两种不同的数据,
而我这个图 表示同一种数据,
同一种数据用不同的图形展示出来。
现贴出代码,此代码为.net aspx页面代码,请根据自己项目语言进行调整,js引用需要修改成自己本地文件位置。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../Js/jquery-1.8.3.min.js"></script>
<script src="../Js/Highcharts-4.2.5/highcharts.js"></script>
<script src="../Js/Highcharts-4.2.5/highcharts-more.js"></script>
<script src="../Js/Highcharts-4.2.5/modules/data.js"></script>
<script src="../Js/Highcharts-4.2.5/modules/exportingNew.js"></script>
<%--<script src="../Js/Highcharts-4.2.5/highcharts-zh_CN.js"></script>--%>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="container" style="border: 1px solid #BEDCF7; margin: auto; margin-top: 10px; width:700px;"></div>
</div>
</form>
<script type="text/javascript">
$(function () {
var title = '各区数据在线率(%)';
var w = 300;
var h = 500;
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: title
},
xAxis: {
type: 'category',
categories: ["A区","B区","C区"],
},
yAxis: {
min: 0,
max: 100,
title: {
text: '在线率(%)'
}
},
tooltip: {
followPointer: true,
//pointFormatter: function () {
// return '<span style="color:' + this.series.color + '">' + this.series.name + '</span>:<b>' + this.y + '</b><br/>';
//},
formatter: function () {//注:这里只适用本页面,一般不会这样显示
var val = '';
if (this.points.length > 0) {
val = '<div>在线率</div>';
for (var i = 0; i < this.points.length; i++) {
if (this.points[i].series.name != '全市平均')
val += '<span style="color:' + this.points[i].color + '">' + this.x + '</span>: <b>' + this.points[i].y + '</b><br/>';
else
val += '<span style="color:' + this.points[i].color + '">' + this.points[i].series.name + '</span>: <b>' + this.points[i].y + '</b><br/>';
}
}
return val;
},
shared: true,
useHTML: true
},
plotOptions: {
spline: {
marker: {
symbol: 'circle',
radius: 2,
enabled: false
}
},
column: {
//stacking: 'percent',//可用的参数值包括 null(不进行堆叠)、"normal"(普通堆叠) 和 "percent"(百分比堆叠)。
groupPadding: 0.08,//不同组柱子之间的间隙
maxPointWidth: 40//柱状最大宽度
}
},
credits: {
enabled: false
},
series: [{
'type': 'column',
'name': '在线率',
'data': [100, 80, 90]
}, {
'type': 'spline',
'dashStyle': 'Dash',
'name': '全市平均',
'data': [90, 90, 90], //在线率之和除以总数量 (100+80+90)/3=90
'color': 'red'
}],
exporting: {
sourceWidth: w,
sourceHeight: h,
scale: 1,
buttons: {
contextButton: {
symbol: 'url(../Js/Highcharts-4.2.5/symbol.png)'
}
},
filename: title
}
});
});
</script>
</body>
</html>
微信扫码关注公众号,一起学习进步,里面有满满的干货,等你来拿。