highcharts缩放曲线图

1.必须的js包

2.初始化容器

<div id="container" style="min-width:400px;height:400px"></div>

3.初始化参数

var chart = {

zoomType: 'x'

};

var title = {

text: '心率表' //标题

};

var subtitle = {//副标题

text: document.ontouchstart === undefined ?

'拖动鼠标以放大' :

''

};

var xAxis = {

type: 'datetime',//数据类型为时间

showFirstLabel: true,//是否显示x轴初始值

showLastLabel: true,//是否显示x轴结束值

labels: {

formatter: function() {

var vDate=new Date(this.value);

//this.value为当前横坐标的值，格式化横坐标显示的值

return vDate.getFullYear()+"-"+(vDate.getMonth())+"-"+(vDate.getDate()-1)

+" "+(vDate.getHours())+":"+vDate.getMinutes() +":"+vDate.getSeconds()

} ,

style: {

fontSize: '13px',

/* fontFamily: 'Verdana, sans-serif',

writingMode:'tb-rl' //文字竖排样式 */

}

} };

var tooltip={//鼠标指上时显示提示信息

dateTimeLabelFormats: {//格式化提示信息

millisecond: '%H:%M:%S.%L',

second: '%H:%M:%S',

minute: '%H:%M',

hour: '%K:%M',

day: '%Y-%m-%d',

week: '%m-%d',

month: '%Y-%m',

year: '%Y'

}

};

var yAxis = {

title: {//y轴的名称

text: '心率'

},

};

var series= [{

type: 'line',

name: '心率对时间',

pointInterval: 24 * 3600 * 1000,

pointStart: Date.UTC(res[0].year, res[0].month, res[0].day,res[0].hrs,res[0].min,res[0].sec),

data: getData(res)

}

];

4.初始化数据

function getData(data){//我的数据是通过ajax加载的

var array = [] ;var str="";

for(var i = 0;i<data.length;i++){

var str =[]

str.push(Date.UTC(data[i].year, data[i].month, data[i].day,data[i].hrs+16,data[i].min,data[i].sec))

str.push(data[i].heart)

array.push(str)

}

return array;

}

5.初始化曲线图

var json = {};

json.chart = chart;

json.title = title;

json.subtitle = subtitle;

json.legend = legend;

json.xAxis = xAxis;

json.yAxis = yAxis;

json.series = series;

json.tooltip = tooltip;

json.plotOptions = plotOptions;

$('#container').highcharts(json);