jQuery+highcharts.js预警CASE分布柱形图插件免费下载

一款一目了然展示很直观的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>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录