一：HighChart介紹
基於JQuery的純JavaScript的圖標庫，支持各種圖表顯示，同時還支持Mootools
與Prototype詳細版本支持在這里：
| JQuery |
1.3.2 - 1.9.x. 2.0.x for modern browsers |
| Mootools |
1.2.5 - 1.4.5 |
| Prototype |
1.7 |
支持目前市場幾乎所有的主要瀏覽器IE, Chrome, FF,Safari, Opera等。其圖形渲染完
全是是基於SVG與VML方式，其中VML方式主要是兼容IE瀏覽器，在IE9+及其它瀏覽
器上渲染技術都是基於SVG方式。下載與安裝指導文檔
->http://docs.highcharts.com/#home安裝好以后，建一個基本static web 項目，如圖
所示：
二：HighChart基本的Bar Chart演示
打開鏈接->http://docs.highcharts.com/#your-first-chart
拷貝your first chart中第二步中的全部script腳本到mydemo.html中的<script></script>
之間。導入JQuery與highchart庫文件支持。代碼如下：
<scriptsrc="static/jquery-1.9.1/jquery-1.9.1.min.js"></script>
<scriptsrc="static/highcharts-3.0.1/js/highcharts.js"></script>
在tomcat中部署demo1之后訪問如下URL：http://localhost:8080/demo1/mydemo.html
在瀏覽器中看到如下Bar Chart：
三：清除HighChart中的數據集(remove data series from high chart object)
代碼修改：
1. 把type：’bar’ 改成type: ’column’ 其作用是讓bar垂直顯示
2. 向script尾部追加如下代碼，自動清除所有series然后刷新
setTimeout(function(){
var series=chart.series;
while(series.length > 0) {
series[0].remove(false);
}
chart.redraw();
},2000);
四：向HighChart中添加data series(add new data series into high chart object)
向script的尾部追加如下代碼，實現添加data series並刷新bar chart
setTimeout(function(){
chart.addSeries({
id:1,
name:"gloomyfish",
data:[1,2,3]
},false);
chart.addSeries({
id:2,
name:"wang-er-ma",
data:[5,2,1]
},false);
chart.addSeries({
id:3,
name:"zhang-san",
data:[4,8,6]
},false);
chart.redraw();
},2000);
addSeries方法中第二個參數false表示不重繪plot，等所有series添加完成調用redraw
方法重繪。
五：在chart中清除high chart官方鏈接(remove high chart official hyperlink in chart)
仔細觀察在Bar Chart的右下角有個highchart的官方鏈接，當然希望去掉，只要在chart
聲明中將credits聲明設置改為false即可。代碼如下：
credits: {enabled: false// remove high chart logo hyper-link},
六：完整Demo源碼
<html>
<head>
<script src="static/jquery-1.9.1/jquery-1.9.1.min.js"></script>
<script src="static/highcharts-3.0.1/js/highcharts.js"></script>
<title>My Demo 1</title>
<script>
$(function() {
var chart;
// initialization chart and actions
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'my_container',
type: 'column'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
credits: {
enabled: false // remove high chart logo hyper-link
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
// JQuery, mouse click event bind with dom buttons
$('#clear-button').on('click', function (e) {
clearPlot();
});
$('#refresh-button').on('click', function (e) {
refreshPlot();
});
});
// clear all series of the chart
function clearPlot() {
//console.log("clear plot data!!!");
var series=chart.series;
while(series.length > 0) {
series[0].remove(false);
}
chart.redraw();
};
function refreshPlot() {
//console.log("refresh plot data!!!");
chart.addSeries({
id:1,
name: "gloomyfish",
data: [1,2,3]
}, false);
chart.addSeries({
id:2,
name: "wang-er-ma",
data: [5,2,1]
}, false);
chart.addSeries({
id:3,
name: "zhang-san",
data: [4,8,6]
}, false);
chart.redraw();
};
setTimeout(function(){
var series=chart.series;
while(series.length > 0) {
series[0].remove(false);
}
chart.redraw();
},2000);
// add new series for the chart
setTimeout(function(){
chart.addSeries({
id:1,
name: "gloomyfish",
data: [1,2,3]
}, false);
chart.addSeries({
id:2,
name: "wang-er-ma",
data: [5,2,1]
}, false);
chart.addSeries({
id:3,
name: "zhang-san",
data: [4,8,6]
}, false);
chart.redraw();
},2000);
});
</script>
</head>
<body>
<h1>High Chart Demo 1</h1>
<div id="my_container" style="width:600px; height:600px;"></div>
<div id="btn-group">
<button type="button" id="clear-button">Clear Plot</button>
<button type="button" id="refresh-button">Draw Plot</button>
</div>
</body>
</html>
運行效果如下：
