今天我們要使用JavaScript圖表Highcharts制作簡單的柱形圖，我們已經安裝好Highcharts，讓我們開始制作圖表吧。

步驟一

在網頁中添加一個div。設置id，設置圖表長、高。代碼如下：

<div id="container" style="width:100%; height:400px;"></div>

步驟二

添加JavaScript標簽初始化圖表，<script> </script>放在網頁任何地方都可，繼續下面的jQuery代碼：

$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});

上面的代碼利用jQuey打開已準備好的代碼文件，如果使用MooTools或者Prototype代替 $(function ()語法，會有一點不同。而且，Highcharts在這些框架中并不是一個插件。因此，需要使用 Highcharts.Chart constructor并定義 chart.renderTO進行選擇。

MooTools

window.addEvent('domready', function() {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
...
});

Prototype

document.observe("dom:loaded", function() {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
...
});

如果你嵌入Stock chart，這里有一個單獨的構造函數方法——Highcharts.StockChart。在這張圖表中圖表以在一個單獨的JavaScript數組提供，即不來自單獨的JavaScript文件也不來自Ajax調用服務器。

var chart1; // globally available
$(function() {
chart1 = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdtoeur // predefined JavaScript array
}]
});
});

步驟三

現在我們可以看到展現在網頁上的圖表：

步驟四

這一步可選。你可以為你的圖表添加一個主題。通過設置Highcharts.setOptions實現。下載預定義主題，添加以下代碼來操作：

<script type="text/javascript" src="/js/themes/gray.js"></script>

》》下載JavaScript圖表Highcharts《《