使用Highcharts製做簡單圖表

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

步驟一

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

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

 步驟二

添加JavaScript標籤初始化圖表，

放在網頁任何地方均可，繼續下面的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>