一款一目了然展示很直观的jQuery+highcharts.js预警CASE分布柱形图插件,最近30天各级预警CASE分布图,不同等级,显示不同颜色,可以隐藏显示操作。
js代码
<script src="js/highcharts.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var chart = {
type: 'column'
};
var title= {
text: '最近30天各级预警CASE分布图'
};
var xAxis ={
categories: [
'2017/10/01', '2017/10/02', '2017/10/3', '2017/10/4', '2017/10/5', '2017/10/6', '2017/10/7', '2017/10/8', '2017/10/9', '2017/10/10',
'2017/10/11', '2017/10/12', '2017/10/13', '2017/10/14', '2017/10/15', '2017/10/16', '2017/10/17', '2017/10/18', '2017/10/19', '2017/10/20',
'2017/10/21', '2017/10/22', '2017/10/23', '2017/10/24', '2017/10/25', '2017/10/26', '2017/10/27', '2017/10/28', '2017/10/29', '2017/10/30'],
maxZoom:30,
labels: {
x:0,//调节x偏移
rotation: 45, //旋转,效果就是影响标签的显示方向
},
opposite : false,// 天显示X轴上与下
type: 'datetime',
title : {
align : 'high',
text : '天',
style : {
color : '#000',
fontSize : '11px'
}
},
};
var credits ={
enabled : false
};
var yAxis={
min: 0,
tickPositions: [0, 10, 20, 30,40,50] ,// 指定竖轴坐标点的值
title: {
text: 'CASE数'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
};
var tooltip={
shared:true,
crosshairs:true,
dateTimeLabelFormats:{
day:"%Y-%m-%d",
},
};
var plotOptions = {
series: {
pointPadding:0.2
},
column: {
//percent置顶
stacking: 'normal',
pointPadding: 0.2,
pointWidth: 15 , //柱子的宽度30px
// 如果x轴一个点有两个柱,则这个属性设置的是这两个柱的间距。
groupPadding : 0.5,
}
};
var legend = {
align: 'center',
x: -30,
verticalAlign: 'bottom',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
shadow: false
};
var series= [{
name: '三级预警',
color:'#fe0100',
data: [5, 3, 4, 7, 2,10,1,1,1,1,1,5,5, 3, 4, 7, 2,10,1,1,1,1,1,5,1,2,3,4,5,6]
}, {
name: '二级预警',
color:'#ff9803',
data: [2, 2, 3, 2, 1,10,1,1,1,1,1,5,5, 3, 4, 7, 2,10,1,1,1,1,1,5,1,2,3,4,5,6]
}, {
name: '一级预警',
color:'#fffe00',
data: [3, 4, 4, 2, 5,10,1,1,1,1,1,5,5, 3, 4, 7, 2,10,1,1,1,1,1,5,1,2,3,4,5,6]
}, {
name: '正常',
color:'#01cd00',
data: [3, 4, 4, 2, 5,10,1,1,1,1,1,5,5, 3, 4, 7, 2,10,1,1,1,1,1,5,1,2,3,4,5,6]
}]
// });
var json = {};
json.chart = chart;
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.legend = legend;
json.tooltip = tooltip;
json.plotOptions = plotOptions;
json.credits = credits;
json.series = series;
$('#container2').highcharts(json);
});
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791