一、Highcharts series屬性
1、下面是一個基本曲線圖的例子：
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 曲線圖</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var title = {
text: '城市平均氣溫'
};
var subtitle = {
text: ''
};
var xAxis = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
var tooltip = {
valueSuffix: '\xB0C'
}
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};
var series = [
{
name: 'Tokyo',
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: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
24.1, 20.1, 14.1, 8.6, 2.5]
},
{
name: 'London',
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 json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
例中有highcharts的常用屬性，主要是series數據列。series用於設置圖表中要展示的數據相關的屬性，參數如下：
| 參數 | 描述 | 默認值 |
| data | 顯示在圖表中的數據列，可以為數組或者JSON格式的數據。如：data:[0, 5, 3, 5]，或 data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}] |
'' |
| name | 顯示數據列的名稱 | '' |
| type | 數據列類型，支持 area, areaspline, bar, column, line, pie, scatter or spline | line |
二、Highcharts基本設置
2.1 在一個圖像中有多條曲線，但是默認想只顯示第一條曲線，則需要做如下設置：
chart: {
renderTo: 'container1',
type: 'line',
events: {
load: function (event) {
for (var i = this.series.length - 1; i > 0; i--) {
this.series[i].hide(); //設置只顯示第一條線，其他都不顯示
}
}
}
}
2.2 去掉highcharts網站url
右下角默認會有一個其網站url存在，這會影響美觀，做如下設置即可去掉：
credits: {
enabled: false //不顯示LOGO
}
或者在 highcharts.js 中 Ctrl+F 搜索 credits屬性，設置 enabled: false
2.3 動態增加曲線數量
在顯示曲線后動態增加顯示曲線條數:
var chart = new Highcharts.Chart(options);
chart.addSeries({
name: '合計',
data: [61, 63, 65, 67, 69, 71, 73, 70, 67, 64, 61, 57]
});
或
chart.addSeries({ name: 'DataURL serie', dataURL: 'serie3.txt' });
2.4 動態刪除曲線
chart.series[0].remove();
三、Highcharts 點擊
$(function () {
// create the chart
$('#container').highcharts({
chart: {
events: {
addSeries: function() {
var label = this.renderer.label('A series was added, about to redraw chart', 100, 120)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
color: '#FFFFFF'
})
.add();
setTimeout(function () {
label.fadeOut();
}, 1000);
}
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
// activate the button
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.addSeries({
data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
});
$(this).attr('disabled', true);
});
});
效果圖：
四、圖表數據動態更新
在實際使用highcharts時，數據不是手寫的，經常是動態賦值data。
4.1 隨機數據點
chart.events屬性中添加 load 方法（圖表加載事件），每秒（1000ms）隨機產生數據點並生成圖表。
<script>
Highcharts.setOptions({ global: { useUTC: false } });
var chart11 = new Highcharts.Chart({
chart: {
renderTo: 'container11',
type: 'spline',
events: {
load: function () {
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: '實時溫度'
},
subtitle: {
text: " "
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%H : %M'
}
},
yAxis: {
labels: {
ormat: '{value} .00',
style: {
color: Highcharts.getOptions().colors[0]
}
},
title: {
text: '溫度:攝氏度',
style: {
color: Highcharts.getOptions().colors[0]
}
},
startOnTick: true, //為true時，設置min才有效
min: 0,
plotLines: [{
value: 0,
width: 1,
color: 'black'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + '<span style="color:#08c">' + Highcharts.numberFormat(this.y, 2) + ' 攝氏度' + '</span>';
}
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
series: [{
type: 'spline',
name: '溫度',
data: (function () {
var data = [], time = (new Date()).getTime(), i;
// 圖表初始的時候顯示10個數據點（都是0）
for (i = -9; i <= 0; i++) { // time是當前時間，故顯示的10個數據點的x軸時間是當前時間之前的，故 i 為負
data.push({
x: time + i * 1000,
y: 0
});
}
return data;
})()
}]
});
</script>
4.2 在原有數據的基礎上改變數據
向HighChart中添加data series，方法：chart.addseries({},trur/false); true:重繪 false：不重繪
eg: 添加name為gloomyfish的數據列。
chart.addSeries({
id:1,
name:"gloomyfish",
data:[1,2,3]
},true);
下面是使用時的例子：
<script>
Highcharts.setOptions({ global: { useUTC: false } });
var chart21 = new Highcharts.Chart({
chart: {
renderTo: 'container21',
type: 'spline',
marginRight: 10
},
title: {
text: '歷史溫度'
},
subtitle: {
text: " "
},
credits: {
enabled: false
},
xAxis: {
type: 'linear'
},
yAxis: {
title: {
text: '攝氏度'
},
startOnTick: true, //為true時，設置min才有效
min: 0,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
series: [{
name:"11",
data:[1,2,3,4,5,6,7]
}]
});
var yVal=[1,2,3,4,5,6,7];
setInterval(function(){
chart21.addSeries({ //添加數據列
name:"歷史溫度",
data:yVal
},true);
},1000);
</script>
效果：
可以發現，上一秒添加的數據還是存在，在查閱資料后發現，要使用 remove() 方法來移除上一秒添加的數據：
var yVal=[1,2,3,4,5,6,7];
setInterval(function(){
chart21.addSeries({ //添加數據列
name:"歷史溫度",
data:yVal
},true);
chart21.series[0].remove(); //移除
},1000);
這樣修改后的效果：
上面是每秒添加固定的數據[1,2,3,4,5,6,7]，現在稍作修改，每秒添加變化的數據，如下所示， yVal[i]=yVal[i]+i; 每次添加數據時數組數據改變
var yVal=[1,2,3,4,5,6,7];
setInterval(function(){
for(var i =0;i<7;i++){ // 數組有7個元素
yVal[i]=yVal[i]+i;
}
chart21.addSeries({ //添加數據列
name:"歷史溫度",
data:yVal
},true);
chart21.series[0].remove(); //移除
},1000);
圖1是原始數據[1,2,3,4,5,6,7]，圖2是i=0時[1,3,5,7,9,11,13] ，圖3是i=1時[1,4,7,10,13,16,19] .......
然后，在這里，我發現如果不把前面的數據移除，所得的圖還是挺好看的，呵呵
4.3 異步動態讀取數據
way1:使用Jquery的Ajax方式，調用后台獲得數據，然后進行綁定的。
（1）在腳本函數里面，初始化一個chart對象，並把series數據data設置為空：
series: [{
type: 'pie',
name: '人員數量',
data: []
}]
（2）通過Ajax調用后台連接獲得數據，然后綁定到具體的屬性上
//通過Ajax獲取圖表1數據
$.ajaxSettings.async = false;
var data1 = [];
$.getJSON("/User/GetCompanyUserCountJson", function (dict) {
for (var key in dict) {
if (dict.hasOwnProperty(key)) {
data1.push([key, dict[key]]);
}
};
chart1.series[0].setData(data1);
});
（3）頁面上寫個div，設置id="container1"來放置圖表
<div id="container1" style="height: 300px;max-width:500px"></div>
way2:簡例（Highcharts之動態刷新——結合后台數據）
$(function(){
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false//是否使用世界標准時間
}
});
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 10,
events: {
load: function() {
var series = this.series;
setInterval(function() {
var result = reload();
var x = result.time;
for(var i=0; i<series.length; i++) {
var y = result.y[i];
series[i].addPoint([x, y], true, true);
}
}, 1000*5);
}
}
},
title: {
text: 'ssssss'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
//圖例屬性
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
borderWidth: 0
},
exporting: {
enabled: false
},
series: create() //series屬性是一個js函數的返回值，需用“js函數名()”來取得
});
});
function create() { var series = new Array(); $.ajax({ type: "POST", url: "xxxx/yyyyy.json", async: false, //表示同步，如果要得到ajax處理完后台數據后的返回值，最好這樣設置 success: function(result){ var channels = result.key; var size = channels.length; for(var i=0; i<size; i++) { var name = channels[i].yyyy; var perTotalCnt = channels[i].xxxx; var data = function() { var data = [], time = result.time, i; for(i=-6; i<=0; i++) { data.push({ x: aaaa, y: zzzz }); } return data; }(); series.push({"name": name, "data": data}); } } }, false); //false表示“遮罩”，前台不顯示“請稍后”進度提示 alert(series); return series; }
});
way3:簡例（異步動態讀取數據）
$(function () {
var chart_validatestatics;
$(document).ready(function () {
var options_validatestatics = {
chart: {
renderTo: 'container_validatestatics',
type: 'column'
},
title: {
text: '驗票分析'
},
subtitle: {
text: 'tourol.cn'
},
xAxis: {
},
yAxis: {
title: {
text: '人數'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '人';
}
},
credits: {
enabled: false
},
series: [{
name: "驗票用戶",
width: 3
}]
}
$.get("/ajaxhandler/dataupdate.ashx?operate_type=validatestatics", function (data) {
var xatrnames = [];
var yvalidators = [];
for (var i = 0; i < data.rows.length; i++) {
xatrnames.push([
data.rows[i].atrname
]);
yvalidators.push([
data.rows[i].atrname,
parseInt(data.rows[i].nums)
]);
}
alert(xatrnames + yvalidators);
options_validatestatics.xAxis.categories = xatrnames
options_validatestatics.series[0].data = yvalidators;
chart_validatestatics = new Highcharts.Chart(options_validatestatics);
});
});
});
要注意的是：x軸數組定義好后，定義y軸數據的時候要把對應在x軸上的值也push到數組里，不然會無法顯示。
對應的在ajaxhandler中，拼接字符串並返回即可：
string json = "{\"rows\":[";
for (int i = 0; i < datas.Rows.Count; i++)
{
json += "{\"atrname\":\"" + datas.Rows[i]["name"] + "\",\"nums\":\"" + datas.Rows[i]["nums"] + "\"},";
}
json = json.TrimEnd(',');
json += "]}";
context.Response.Write(json);
context.Response.Flush();
context.Response.End();
4.4 同步獲取數據
使用Websocket與服務器建立TCP連接之后，會一直連接，瀏覽器和服務器直接可以數據相互傳送。
在應用Websocket之前，我們可以先結合前面的動態隨機數據想想，如果把數據點的Y值換成了從服務器接收的數據就可以畫出接收的數據。
<script>
Highcharts.setOptions({ global: { useUTC: false } });
var chart21 = new Highcharts.Chart({
chart: {
renderTo: 'container21',
type: 'spline'
},
title: {
text: '歷史溫度'
},
subtitle: {
text: " "
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%H : %M'
}
},
yAxis: {
labels: {
format: '{value} .00',
style: {
color: Highcharts.getOptions().colors[0]
}
},
title: {
text: '溫度：攝氏度',
style: {
color: Highcharts.getOptions().colors[0]
}
},
startOnTick: true, //為true時，設置min才有效
min: 0,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + '<span style="color:#08c">' +
Highcharts.numberFormat(this.y, 2) + ' 攝氏度' + '</span>';
},
crosshairs: true
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
series: [{
type: 'spline',
name: '實時溫度',
//data: [0,0]
data: (function () {
var data = [],
time = (new Date()).getTime(),
i;
for (i = -9; i <= 0; i++) {
data.push({
//x: time + i * 1000,
x: time,
y: 0
});
}
return data;
})()
}]
});
setInterval(function(){
var x;
var y;
x = (new Date()).getTime(); // 當前時間
y = Math.random();
chart21.series[0].addPoint([x, y], true, true); //追加點並去掉一個點 //chart1.series[0].addPoint([x, y]);追加點( 不去掉點 )
},1000);
</script>
改寫setInterval()函數，把Y值替換成val
由於下面的代碼是直接從做過的項目中copy過來的，看的時候有的地方出現的有點突兀，不用理會，只看y值的改變就好了。
function myChart(val) {
var x;
var y;
x = (new Date()).getTime(); // 當前時間
y = val;//Math.random();
chart1.series[0].addPoint([x, y], true, true); //追加點並去掉一個點 //chart1.series[0].addPoint([x, y]);追加點( 不去掉點 )
}
function ParseValue(val) {
var data = JSON.parse(val); //字符串轉換為對象
var v = document.getElementById("device").innerHTML;
if (v == data.device_id) {
if (data.device_id > 9) {
switch (data.value) {
case 0:
document.getElementById("vd").innerHTML = "關閉";
break;
case 1:
document.getElementById("vd").innerHTML = "打開";
break;
case 2:
document.getElementById("vd").innerHTML = "停止";
break;
default:
}
} else {
document.getElementById("vd").innerHTML = data.value;
}
}
if (v == data.device_id) {
if (data.device_id < 10) {
myChart(data.value);
} else {
document.getElementById("container1").hidden();
}
}
}
當然，在這之前還要建立TCP連接：
<script>
var ws;
var SocketCreated = false;
var isUserloggedout = false;
window.onload = function Connect() {
if (SocketCreated && (ws.readyState == 0 || ws.readyState == 1)) {
//（SocketCreated = false）&&（連接未建立）。。。。readyState屬性表示ReadOnly屬性的狀態。等於0或者1表示連接未建立
SocketCreated = false;
isUserloggedout = true;
ws.close();
} else {
//alert("准備連接到服務器 ...");
document.getElementById("wsServerStatus").innerHTML = "准備連接到服務器 ...";
try {
if ("WebSocket" in window) {
ws = new WebSocket("ws://192.168.1.108:2012");
}
else
if("MozWebSocket" in window) {
ws = new MozWebSocket("ws://192.168.1.108:2012");
}
SocketCreated = true;
isUserloggedout = false;
} catch (ex) {
alert(ex, "ERROR");
return;
}
ws.onopen = WSonOpen;
ws.onmessage = WSonMessage;
ws.onclose = WSonClose;
ws.onerror = WSonError;
}
};
function WSonOpen() {
ServerStatus = true;
document.getElementById("wsServerStatus").innerHTML = "連接已建立";
Login();
};
function Login() {
var loginBody = { account: "", pass_word: "" };
loginBody.account = "11111111111";
loginBody.pass_word = "1111";
var body = JSON.stringify(loginBody);
var loginReq = { key: "/user/login", token: "", type: 1, body: body };
ws.send(JSON.stringify(loginReq));
}
function WSonMessage(event) {
var msg = JSON.parse(event.data);
switch (msg.key) {
case "/device/data":
case "/device/status":
var n = document.getElementById("content-main").childElementCount;
for (var i = 1; i < n; i++) {
try{
var m = document.getElementById("content-main").children[i];
m.contentWindow.ParseValue(msg.body);
}catch(err){
}
}
break;
}
};
function WSonClose() {
ServerStatus = false;
document.getElementById("wsServerStatus").innerHTML = "連接已關閉";
};
function WSonError() {
ServerStatus = false;
document.getElementById("wsServerStatus").innerHTML = "遠程連接中斷";
};
function WsSend(val) {
ws.send(val);
}
</script>