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位的话不需乘1000
    var 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中文网