highcharts图表的常见操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="TCPConnect"></div>
<!-- 引入highcharts -->
<script src="../highcharts/highcharts.js"></script>
<script src="../highcharts/highcharts-zh_CN.js"></script>
<script>
//-------------
//- TCPConnect CHART -
//--------------
Highcharts.setOptions({
global:{
timezone:'Asia/Shanghai'
}
});//全局设置时间
var TCPConnectxAxis=['00','01','02','03','04','05','06'];
var TCPConnectData=[{
name: 'tcpconnect',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: 'tcpwait',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}];
var TCPConnectOptions={
credits:{ //版权信息
//enabled:false,
text:"点击查看更多",
href:'http://10.88.22.8/zabbix',
position:{
align:'left', //显示在左边
x:20,
}
},
chart: {
type: 'spline'
},
title:{text:''},
xAxis: {
categories: TCPConnectxAxis
},
yAxis:{title:"",},
series:TCPConnectData,
};
//实例化图表
var TCPConnectspline = Highcharts.chart('TCPConnect', TCPConnectOptions);
//TCPConnectspline.destroy()//销毁图表
var TCPConnectAddData={name: '新增数据', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 44, 26.5, 23.3, 18.3, 13.9, 9.6]}
//TCPConnectspline.addSeries(TCPConnectAddData) //新增数据函数
var TCPConnectNewData=[{name: '新增数据', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 44, 26.5, 23.3, 18.3, 13.9, 9.6]},{name: '新增数据1', data: [7.0, 69, 9.5, 14.5, 18.2, 21.5, 44, 26.5, 23.3, 18.3, 13.9, 9.6]}]
//TCPConnectspline.update({series:TCPConnectNewData,}) //更新图表数据
</script>
</body>
</html>
更多示例请查看 https://api.hcharts.cn/highcharts
