HighStock.js使用-简单示例

实现的效果就是：
在同一个图表中显示三个折线图、柱状图，下方有一个时间区间的选择工具。折线图、柱状图实现自定义颜色。
在整个图表下方是一个数据表格，表格中的数据根据上方时间区间显示所选区间的数据。

实现同一个图表中显示三个折线图、柱状图

html代码

 <div class="col-lg-11"><div id="container" class="chart" style="height: 500px;margin-left: 1px"></div></div>

对应的JavaScript代码

var first = []; //第一个折线图
var second = []; //第二个柱状图
var third = []; //第三个折线图
for (var i = 0; i < data.data.length; i += 1) {
    first.push([Date.parse(data.data[i].FDATE), // 该条数据对应的日期data.data[i].a, // 该条数据的内容]);second.push([Date.parse(data.data[i].FDATE), // 该条数据对应的日期data.data[i].b // 该条数据的内容]);third.push([Date.parse(data.data[i].FDATE), // 该条数据对应的日期data.data[i].c // 该条数据的内容]);
}

初始化HighStock并赋值

Highcharts.stockChart('container', {
    chart: {
    zoomType: 'x',        //通过鼠标拖动哪个轴来缩放图表，就是x轴的时间区间选择工具条},rangeSelector: {
    		//时间选择器，汉化buttons: [{
    type: 'day',		// "millisecond", "second", "minute", "hour", "day", "week", "month", "ytd", "all"count: 1,			//抓取时间（default 1）text: '天'}, {
    type: 'week',count: 1,text: '周'}, {
    type: 'month',count: 1,text: '月'}, {
    type: 'year',count: 1,text: '年'}, {
    type: 'all',text: '全部'}],selected: 1},yAxis: [{
     // y轴的样式labels: {
    align: 'left'},height: '40%',resize:{
    enabled:true}}, {
    labels: {
    align: 'left'},top: '40%',height: '30%',offset: 0,resize:{
    enabled:true}}, {
    labels: {
    align: 'left'},top: '70%',height: '30%',offset: 0,resize:{
    enabled:true}}],xAxis: [{
     // x轴的样式minRange: 3600000, // 最小的时间区间events:{
     // 时间区间发生变化时触发事件afterSetExtremes: function(e) {
    var min = timeChange(e.min); // 当前时间区间的最小值var max = timeChange(e.max); // 当前时间区间的最大值/*things to do 在这里调用要执行的方法等 */}}}],series: [{
     // 第一个折线图的样式及内容type: 'area',name: 'a',data: first,color:'#1e90ff',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')]]},}, {
    // 第二个柱状图的样式及内容type: 'column',name: 'b',data: second,yAxis: 1,color:'#1e90ff',}, {
    // 第三个折线图的样式及内容type: 'area',name: 'c',data: third,yAxis: 2,color:'#1e90ff',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')]]},}],plotOptions: {
    series: {
    showInNavigator: true}},responsive: {
    rules: [{
    condition: {
    maxWidth: 800},chartOptions: {
    rangeSelector: {
    inputEnabled: false}}}]},tooltip: {
     shared: true,formatter: function () {
     // 自定义tip提示框的格式var s = '<b>' + Highcharts.dateFormat('%Y,%b,%e,%A', this.x) + '</b>'; // 格式化时间s += '<br/>a：'+ this.points[0].y + '' +'<br/>b：'+ this.points[1].y + '' +'<br/>c：'+ this.points[2].y + '';return s;}}
});

格式化时间

function tineChange(time){
    
var date = new Date(time);//时间戳为10位需*1000，时间戳为13位的话不需乘1000var Y = date.getFullYear() + '-';var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';var D = date.getDate() < 10 ? '0'+date.getDate() + ' ': date.getDate() + ' ';var h = date.getHours() < 10 ? '0'+date.getHours() + ':' : date.getHours() + ':';var m = date.getMinutes() < 10 ? '0'+date.getMinutes() + ':' : date.getMinutes() + ':';var s = date.getSeconds()< 10 ? '0'+date.getSeconds() : date.getSeconds();return Y+M+D+h+m+s;
}

参考

前端开发中，js时间与时间戳的转换
HighCharts中文网