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);
转载请注明原文地址: https://ju.6miu.com/read-14095.html
