简单使用highstock

引用

    Highstock lets you create stock or general timeline charts in pure JavaScript, including sophisticated navigation options like a small navigator series, preset date ranges, date picker, scrolling and panning.

    上面是官方解释，我理解的，stock有“股票”的意思，highstock可用于制作股票走势的图表：对大量数据的支持，自带的多样的日期范围选择。

怎么开始
    引入一个jquery.js，再highcharts.js，在html中有一个id为container的DIV，用下面的代码smoketest，见ONLINE DEMO

// Create the chart
$('#container').highcharts('StockChart', {
    rangeSelector : {
        selected : 1
    },

    title : {
        text : 'AAPL Stock Price'
    },
    
    series : [{
        name : 'AAPL',
        data : [
            // 第一位是日期的毫秒数，使用new Date().UTC()可以获得，第二位是数值
            /* Jul 2006 */
            [1153440000000,60.72],
            [1153699200000,61.42],
            [1153785600000,61.93],
            [1153872000000,63.87],
            [1153958400000,63.40],
            [1154044800000,65.59],
            [1154304000000,67.96]
        ],
        tooltip: {
            valueDecimals: 2
        }
    }]
})

日期中文与格式化

// 中文日期
Highcharts.setOptions({
    lang : {
        months : ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        weekdays : ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    }
});

// 格式化横轴的日期
var option = {
// others omitted

xAxis : {
    type : 'datetime',
    dateTimeLabelFormats : {
        second : '%Y-%m-%d<br/>%H:%M:%S',
        minute : '%Y-%m-%d<br/>%H:%M',
        hour : '%Y-%m-%d<br/>%H:%M',
        day : '%Y<br/>%m-%d',
        week : '%Y<br/>%m-%d',
        month : '%Y-%m',
        year : '%Y'
    }
}

使用jQueryUI的datepicker，当然要先映入jQueryUI相关的js和css,见ONLINE DEMO

// option就是上面DEMO的参数
$('#container').highcharts('StockChart', options, function(chart) {
    // apply the date pickers
    setTimeout(function() {
        $('input.highcharts-range-selector', $(chart.container).parent()).datepicker();
    }, 0);
});