天气预警CASE分布图

1、新建html文档。

2、书写hmtl代码。<div id="container2" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

3、初始化css代码。<style>html, body { width : 100%; height : 100%; margin : 0; padding : 0; }.wrapper { position : relative; width : 420px; margin : 0 auto; padding : 0; font-size : 0; }.icon { position : relative; display : inline-block; width : 100px; height : 100px; margin : 20px; border-radius : 18px; }</style>

4、书写并添加js代码。<script src="js/jquery.min.js"></script><script src="js/highcharts.js"></script><script> $(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>

5、代码整体结构。

6、查看效果。