1.引入 js文件
<script type="text/javascript" src="${ctx}/static/comp/highcharts/highcharts.js" ></script>
2.代码:
Highcharts.setOptions({ global: { useUTC: false } });
var chart;
/*
containerId为容器id,data为时间点数据格式为:
[{name:'333',data:[[1431288610000,9],[1431292210000,40],[1431295810000,9],[1431375010000,20],[1431378610000,30],[1431382210000,10]]},{name:'12312312',data:[[1431385810000,20],[1431389410000,30],[1431457810000,90],[1431461410000,90],[1431465010000,50],[1431468610000,10],[1431479410000,40]]}]解释:数据为时间点数据,没一点的x轴为时间毫秒数,y轴为数据值
*/
function createHighcharts(containerId,data){
chart = new Highcharts.Chart({
chart: {
renderTo:containerId,
type: 'spline',
zoomType: 'x'
},
title: {
text: '剂量数据及变化曲线'
},
/*subtitle: {
text: 'Irregular time data in Highcharts JS'
},
*/
xAxis: {
type: 'datetime',
/*
dateTimeLabelFormats: {
hour: '%H:%M'
}
*/
labels: {
step: 2,
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
}
}
},
yAxis: {
title: {
text: '剂量值(uSv/h)'
},
min: 0
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br>'+
Highcharts.dateFormat('%H:%M', this.x) +': '+ this.y +' (uSv/h)';
}
},
exporting : {
enabled : false
},
plotOptions: {
series: {
pointInterval: 3600 * 1000
}
},
series:data
});
}
注意事项:
1.Highcharts.setOptions({ global: { useUTC: false } }); 这句为 设置highcharts时间格式 不为UTC时间,如果不设置 会出现 前台显示时间和后台 时间差8小时的状况。
2.后台的数据时间点要升序排序,否则在鼠标移动时 HighCharts Tooltip是只能显示第一和最后一点的提示信息
3.在前端如果曲线多的时候或者重复画曲线的时候,要调用chart.destroy();在从新创建新的曲线