简单使用highstock
// 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 omittedxAxis : { 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' }}
// option就是上面DEMO的参数$('#container').highcharts('StockChart', options, function(chart) { // apply the date pickers setTimeout(function() { $('input.highcharts-range-selector', $(chart.container).parent()).datepicker(); }, 0);});