Highcharts使用二示例

  示例一、为演示参数配置而写

var chart;
$(document).ready( function() {
    chart = new Highcharts.Chart({
        chart: {//整体控制
            renderTo: 'container',//把报表放进那个盒子里
            defaultSeriesType: 'spline',//可选，默认为line。控制线条样式，line:折线;spline:平滑的线;area:折线、下边有颜色块儿;areaspline:平滑的线、下边有颜色块儿;column:柱状图;bar:横向条形图;pie:饼图;scatter:点状图;
            marginRight: 130,//可选，控制报表位置
            marginBottom: 25,//可选，控制报表位置
            inverted: false,//可选，控制显示方式，默认上下正向显示
            shadow:true,//外框阴影
            backgroundColor:"#FFF",
            animation:true,
            borderColor:"#888",
            borderRadius:5,
            borderWidth:1,
            ignoreHiddenSeries:true,
            reflow:true,
            plotBorderWidth:1,
            alignTicks:true
            //defaultSeriesType :'dxk'//别名
        },
        global: {
            useUTC: false
        },
        labels:{//在报表上显示的一些文本
            items:[{
                html:'dxk',
                style:{left:'100px',top:'100px'}
            },
            {
                html:'wuhui',
                style:{left:'160px',top:'100px'}
            }]
        },
        credits:{//右下角的文本
            enabled: true,
            position: {
                align: 'right',
                x: -10,
                y: -10
            },
            href: http://www.cqu.edu.cn,
            style: {
                color:'blue'
            },
            text: "duxiaokong.com"
        },
        plotOptions:{//绘图线条控制
            spline:{
                allowPointSelect :true,//是否允许选中点
                animation:true,//是否在显示报表的时候使用动画
                cursor:'pointer',//鼠标放在点上的时候显示的形状
                dataLabels:{
                    enabled :true,//是否在点的旁边显示数据
                    rotation:0
                },
                enableMouseTracking:true,//鼠标放上去是否显示那个小方框
                events:{//监听点的鼠标事件
                    click: function() {
                    }
                },
                marker:{
                    enabled:true,//是否显示点
                    radius:3,//点的半径
                    //fillColor:"#888"
                    //lineColor:"#000"
                    //symbol: 'url(http://highcharts.com/demo/gfx/sun.png)',//这个可以让点用图片来显示
                    states:{
                        hover:{
                            enabled:true//鼠标放上去点是否放大
                        },
                        select:{
                            enabled:false//控制鼠标选中点时候的状态
                        }
                    }
                },
                states:{
                    hover:{
                        enabled:true,//鼠标放上去线的状态控制
                        lineWidth:3
                    }
                },
                stickyTracking:true,//跟踪
                visible:true,
                lineWidth:2,//线条粗细
                //pointStart:100,
            }
        },
        title: {
            text: 'Monthly Average Temperature',//标题
            x: -20 //控制标题位置
        },
        subtitle: {
            text: 'Source: WorldClimate.com',//副标题
            x: -20//控制标题位置
        },
        xAxis: {//x轴数据
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            //gridLineWidth:1,
            //gridLineDashStyle: 'longdash',
            lineWidth:1,//最下边的那条水平线
            plotBands:{//一束带
                color :"#CCC",
                from:4,
                to:5,
                label: {
                    text: 'Plot band',
                    rotation: 90,
                    textAlign: 'left'
                }
            },
            plotLines: [{//一条竖线
                color: '#FF0000',
                width: 2,
                value: 5.5
            }],
            //minorGridLineWidth: 2,
            //minorTickInterval: 'auto',
            //minorTickColor: '#000000',
            //minorTickWidth: 10
        },
        yAxis: {//y轴
            title: {
                text: 'Temperature (°C)'//y轴标题
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
            //reversed: true
            opposite: true,
            //gridLineDashStyle: 'longdash',//线条类型
            //minorGridLineColor: '#E0E0E0',
            //minorTickInterval: 'auto'
        },
        tooltip: {//控制鼠标放上点后显示的提示框
            //enabled:true,
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                this.x +': '+ this.y +'°C';
            },
            backgroundColor :"#CCC",
            //crosshairs: {
            //  width: 1,
            //  color: 'gray',
            //  dashStyle: 'shortdot'
            //}
            crosshairs:[{//控制十字线
                width:1,
                color:"#CCC",
                dashStyle:"longdash"
            },
            {
                width:1,
                color:"#CCC",
                dashStyle:"longdash"
            }],
            //crosshairs: [true, true],
            shared :false,
            shadow :true
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: 0,
            y: 100,
            borderWidth: 0,
            shadow:false
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });

});

示例二、项目中用到的动态曲线图，多条坐标线，随时间向左移动

/<![CDATA[
var chart;
var datas = <{$json_status}>;
var len = datas.length;
$(document).ready( function() {
    getData = function(item) {
        var data = [],i;
        for (i = 0; i < len; i++) {
            data.push({
                y:(datas[i][item])/1
            });
        }
        return data;
    }
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'spline',
            marginRight: 180,
            plotBorderWidth:0,   
   zoomType : 'xy',
            events: {
                load: function() {
                    var series_CPU = this.series[0];
                    var series_MEM = this.series[1];
                    var series_DISK = this.series[2];
                    var j  = 0;
                    setInterval( function() {
                        y_CPU = (datas[j]['CPU'])/1;
                        y_MEM = (datas[j]['MEM'])/1;
                        y_DISK = (datas[j]['DISK'])/1;
                        if(j<len-1) {
                            j++;
                        } else {
                            j=0;
                        }
                        series_CPU.addPoint(y_CPU, true, true);
                        series_MEM.addPoint(y_MEM, false, true);
                        series_DISK.addPoint(y_DISK, false, true);
                    }, 1000);
                }
            }
        },
        title: {
            text: '设备状态图'
        },
        credits:{
            enabled: false
        },
        plotOptions:{
            spline:{
                dataLabels:{
                    enabled :false,
                }
            }
        },
        yAxis: [{
   title: {
    text: 'CPU使用率'
   },
   labels : {
    formatter : function() {
     return this.value + '%';
    }
   },   
   lineWidth: 1,
   tickWidth: 1
  },
  {
   title:{
    text:'内存使用'
   },
   opposite:true,
   labels : {
    formatter : function() {
     return this.value + 'M';
    }
   },
   lineWidth: 1,
   tickWidth: 1
  },
  {
   title:{
    text:'硬盘使用'
   },
   opposite:true,
   labels : {
    formatter : function() {
     return this.value + 'M';
    }
   },
   lineWidth: 1,
   tickWidth: 1
  }],
        tooltip: {
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                //Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                //'时间：'+this.x+'<br/>'+
                Highcharts.numberFormat(this.y, 0);
            },
            crosshairs: [true, true]
        },
        legend: {
            enabled: true,
            borderWidth: 0
        },
        exporting: {
            enabled: true
        },
        series: [{
            name: 'CPU利用率',
   type:'line',
            data: getData('CPU')
        },
  {
            name: '内存使用',
            data: getData('MEM'),
   yAxis:1
        },
  {
            name: '硬盘使用',
            data: getData('DISK'),
   yAxis:2
        }]
    });
});
//]]>