jQuery+highcharts.js预警CASE分布柱形图插件

查看演示 下载资源 下载积分： 10 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

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>