Highcharts的spline简单例子
解决方法：
以精确到秒的时间毫秒数为x轴，进场人数为y轴，来生成平滑曲线spline，以5个点示例
1.标签
<div id="container" style="min-width:400px; height:230px;"></div>
2.生成Highcharts代码，container是标签的id
var chart;
$(function(){
Highcharts.setOptions({
global: {
useUTC: false
}
})
var json = [{"marker":{"symbol":"circle"},"name":"进场人数","data":
[{"y":0,"x":1534879905000},{"y":50,"x":1534880025000},{"y":0,"x":1534880145000},
{"y":0,"x":1534880265000},{"y":20,"x":1534880385000}]}];
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
marginTop: 28,
marginBottom: 50,
marginLeft: 81,
marginRight: 4
},
legend: {
align: 'center',
verticalAlign: 'bottom',
x: 10,
y: 14,
floating: true
},
title: {
text: '进场人数',
margin: 2,
style: {
fontSize: '13px',
color: '#fff'
}
},
colors: ["#B03060"],
xAxis: {
type: 'datetime',
labels: {
style: {
fontSize: '13px',
color: '#333'
},
formatter: function(){
return Highcharts.dateFormat('%H:%M:%S', this.value);//
格式化x轴时间格式
}
},
},
yAxis: {
title: {
align: 'high',
offset: 0,
text: '进场人数（个）',
rotation: 0,
x: 51,
y: -16,
style: {
fontSize: '13px',
color: '#999'
}
},
labels: {
format: '{value}',
style: {
fontSize: '13px',
color: '#333'
}
},
minorTickInterval: 25,
lineWidth: 1,
tickWidth: 1,
gridLineColor: '#e8e8e8'
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {
color: '#F0F0F0'
},
borderRadius: 15,
headerFormat: '<span style="font-size:16px">{point.key}</span><table>',
pointFormat: '<tr><td style="font-size:13px;color:
{series.color};padding:0">{series.name}： </td>' +
'<td style="font-size:13px; padding:0">{point.y:.0f} 个</td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
spline: {
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
marker: {
enabled: false
}
}
},
series: json
});
});
本文链接：http://www.yayihouse.com/yayishuwu/chapter/1519