【若要轉載 請标明出處 http://raising.iteye.com/blog/2214779】
最近要求做前台的一些東西，用到了Highcharts。。其實在Highcharts中文網上有相應的示範demo，一般你所需要的圖的樣式都可以找到。難點在于實際開發中，需要的資料往往是要結合背景請求并響應的資料的。
附Highcharts中文網：
http://www.hcharts.cn/demo/index.php
而我這次做的是趨勢圖，涉及到動态重新整理，做的過程還是花了一番功夫的，也補充和鞏固了一點js的知識，為了紀念，把過程記錄一下：
首先，是引入HIghcharts繪圖相關的js檔案和jQuery.js。
接下來，把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，
tickInterval: 60 * 1000
},
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()
});
});
}); 注意屬性：global: { useUTC: false }是很重要的，對于我們在中國地區使用的系統而言，如果你這個設定為true或者不設定的話，會莫名其妙少了8個小時。因為如果你不設定為false,則是以世界标準時區為準，而由于中國所在時區為+8，是以經過 Highcharts 的處理後會減去8個小時。——這也是會偶爾出現的比較難以發現的問題。。（我就遇到了這個問題，一直在highcharts的dateFormat上找問題，搞了好久才發現這個問題~~~~）
重點是chart裡面的event屬性，series屬性。注意，此時：series屬性是一個js函數的傳回值，需用“js函數名()”來取得。
而demo裡面，series是這樣的：
series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}] 這是死資料，并且隻顯示一條曲線（或折線）。我們需要得到背景資料，并且x,y的值都需要由背景決定。
create()方法的定義如下：
function create() {
var series = new Array();
$.ajax({
type: "POST",
url: "xxxx/yyyyy.json",
async: false, //表示同步，如果要得到ajax處理完背景資料後的傳回值，最好這樣設定
success: function(result){
var ccc = result.key;
var size = ccc.length;
for(var i=0; i<size; i++) {
var name = ccc[i].yyyy;
var perTotalCnt = ccc[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});
}
}
});
alert(series);
return series;
} 1）其中，series.push({"name": name, "data": data});這一行就是在往series數組[]中push資料，進而生成格式中需要的series數組；
注意series是一個json的數組，哪怕你隻有一個series,也是一個長度為1的數組。如：
function create() {
var series = {};
series.name = '個數';
series.data = [{'x':1448887500000,'y':50},{'x':1448887620000,'y':30},{'x':1448887680000,'y':31},{'x':1448887740000,'y':20},{'x':1448887800000,'y':20},{'x':1448887860000,'y':33},{'x':1448887920000,'y':39}];
var data = [];
data[0] = series;
return data;
} 2）xAxis的tickInterval: 60 * 1000屬性，表明x軸的顯示間隔為分鐘（機關為ms）,前提是你指定xAis的type: 'datetime'，這個屬性決定了x軸顯示的資料格式，如你指定為1分鐘時，顯示的是20:45，20.46，20:47等，同時也決定了顯示的個數；
3）當你指定xAis的type為datetime時，point的x值是long值的毫秒數，表示從1970年01月01日00:00:00:000至今為止的毫秒數。
4）當出現Highcharts Errors #19的錯誤時，請檢查加載時x軸的點個數是否超過999個（最高限制）；x軸上的兩個點的時間間隔是否太大。
而這一部分：
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);
}
} 則是每隔一段時間(1000*5=5s)重新整理頁面資料，并且通過循環生成多條"曲線"。其中reload()也是一個js函數的傳回值：注：定義json對象的方法var json = {"key1": value1, "key2":value2} (reload方法就不貼了，也是通過ajax請求背景，得到相應資料并且處理相應資料後，放到一個資料結構或json對象中)。
其實，highcharts繪制chart也是典型的jquery文法·，是以我們取一個已經存在的highcharts對象時，可以直接用$("#divId").highcharts()即可，這符合Highcharts為對象屬性指派和取值的規則~~~~~~~~
效果（某一時刻）：
畫圖完畢。
-
Highcharts之動态重新整理——結合背景資料 - 大小: 31.6 KB
- 檢視圖檔附件