整理higcharts使用時基本配置

使用higchats時要注意若是是時間的話要處理higcharts處理時間戳的時候啓用的utc時間,否則顯示時間會少8個小時
詳情看:http://www.javashuo.com/article/p-rbemnrzo-bt.html
var chart = Highcharts.chart('net', {
    title: {
        text: ''//higchatrs的標題,不能不寫默認顯示
    },
    xAxis: {
        type: 'datetime',//時間戳格式數據
        dateTimeLabelFormats: {
            millisecond: '%H:%M:%S.%L',
            second: '%H:%M:%S',
            minute: '%H:%M',
            hour: '%H:%M',
            day: '%m-%d',
            week: '%m-%d',
            month: '%Y-%m',
            year: '%Y'
        }
    },
    yAxis: {
       min: 0,//數據從0開始,//數據從0開始
       minRange: 1,//當數據爲0時顯示在最下面
       title : {
           text : ''//y軸說明,不寫爲默認值
       },
       plotLines : [ {
           value : 0,
           width : 1,
           color : '#808080'
        } ]
    },
    legend: {
        verticalAlign : 'top',//多折線時折線信息顯示位置
        borderWidth : 0
    },
    plotOptions : {
        area: {
            fillColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                stops: [
                    [0, Highcharts.getOptions().colors[0]],
                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                ]
            },
            marker: {
                radius: 2//折線點大小
            },
            lineWidth: 1,//折線粗細
            states: {
                hover: {//鼠標懸浮時折線樣式
                    lineWidth: 1
                }
            },
            threshold: null
        },
        series: {
            // 針對全部數據列有效
            lineWidth: 1
        }
    },
    tooltip: {
        formatter:function () {//自定義鼠標懸浮提示氣泡
            var self= this;
            var dateTime= new Date(self.x);//time爲時間戳
            var date= changedate(dateTime);
            var tool = self.series.name+"<br/>" + date + "<br/>" + this.y;
            return tool;
    }
},
    series: [{
        name: 'zhagnsan',
        data:systemInfo[1],
        color:'#7cb5ec'
    }, {
        name: 'lisi',
        data:systemInfo[2],
        color:'#24E9EC'
    },{
        name: 'wangwu',
        data:systemInfo[3],
        color:'#90ed7d'
    },{
        name: 'zhaoliu',
        data:systemInfo[4],
        color:'#f7a35c'
    }]
});
相關文章
相關標籤/搜索