Highcharts 动态图表创建

1. Highcharts 和 jQuery 结合使用很方便

---

首先, 就是环境准备, 需要安装 jQuery 和 Highcharts, 可以直接使用 CDN:

2. 基本配置

---

var chart = new Highcharts.Chart({
    chart: { //    表
    },
    title: { //    标题   
    },
    subtitle: { // 子标题
    },
    xAxis: {    // X 轴
    },
    yAxis: {    // Y 轴
    },
    tooltip: {  // 提示信息 (如 %,单位等)
    },
    legend:{    // 展示方式, 对其方式等
    },
    exporting: {// 导出图标/打印....
    },
    series: [{  // 数据
    }],
    credits: {  // 关于版权信息
    }
    });

3. 具体配置

0. Highcharts 需要使用一个已准备好的 div, 并指定 id 和宽高等, 图表就放在 div 里面:

1. 是否使用世界时间, 这个与坐标轴时间刻度有关:

Highcharts.setOptions({
    global: {
      useUTC: false // 是否使用世界标准时间
    }
});

2. chart 的配置

chart: {
    renderTo: 'container', // 放图表的 div 的 id.
    type: 'spline',        // 图标类型: 设置图表样式，可以为line,spline, scatter, splinearea bar,pie,area,column 默认为line
    animation: Highcharts.svg,
    // don't animate in old IE               
    // marginRight: 10,
    events: {  // 事件回调，支持addSeries方法，click方法，load方法，selection方法等的回调函数
       load: function() {}
    }
},

title: {
    text: "title name"  // 标题名
    // x: -20 //center设置标题的位置 
},

subtitle: {
    text: "title name"  // 子标题名, 基本配置和 title 一样
},

xAxis: {    // X 轴
    type: 'datetime',
    tickPixelInterval: 100,
    tickInterval: TIME_INTERVAL  // 这是动态图的时间间隔.
},
// 与 x 轴相似, 若要配置两条, 可以如下配置: [] json 格式.
yAxis: [{  
    title: {},    
},{
    title: {},
    opposite: true // Y轴分立两侧, 一个在左侧, 这个在右侧
}],
  
tooltip: {  // 提示信息 (如 %,单位等)//鼠标移到图形上时显示的提示框    
    formatter: function() {    
        return ''+ this.series.name +'
'+    
        this.x +': '+ this.y +'°C';    
    }    
},

legend:{    // 图例, 即 --图1 ++图2 ==图3 这种
    enabled: false
}, 
exporting: {// 导出图标/打印....
    enabled: false
},

series: [{  // 数据, 如果有两条, 也要是json
    name: 'name',
    yAxis: 0  // 选择对应的y轴数据.
},{
    name: 'name2',
    yAxis: 1
}],

credits: {  // 关于版权信息    
    enabled: true,    
    position: {//位置设置    
      align: 'right',    
      x: -10,    
      y: -10    
    },    
    href: "http://www.highcharts.com",//点击文本时的链接    
    style: {    
      color:'blue'    
    },    
    text: "Highcharts Demo"//显示的内容    
}

3. 将 第二步 的数据转化为一组 json 格式的数据, 然后直接创建 chart 图表, 这样就有基本的静态图了. 动态图只是加了一步, 定时更新数据加入到图表中而已.

// 可以直接将上面的数据写成 json, 也可以直接用函数转化.
var chart = new Highcharts.Chart({
    // 第2步 char 的配置, 都放到这里相对于是 一大串的json数据.
})

---

以下为完整的实例(来自 菜鸟教程 静态图):

---

[reference]

[1] 飛雲若雪. Highcharts 多个Y轴动态刷新数据[M]. (2014-03-18 19:52). https://www.cnblogs.com/sydeveloper/p/3608588.html
[2] 天马3798. Highcharts的基本属性和方法详解[M]. (2015-07-24 10:08) http://blog.csdn.net/u011127019/article/details/47036725
[3] runoob.com. Highcharts 配置语法. http://www.runoob.com