jQuery highcharts.js柱形圖代碼



126 502 168



特效描述:jQuery highcharts.js 柱形圖代碼,jQuery highcharts.js柱形圖代碼

代碼結構

1. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/highcharts.js"></script>

2. HTML代碼

<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群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表