選項(xiàng)（options）

當(dāng)你使用JavaScript圖表工具Highcharts.Chart初始化圖表，選項(xiàng)會(huì)是你的第一個(gè)參數(shù)。下面的代碼（chart: {開始這一行）展現(xiàn)的為選項(xiàng)參數(shù)。

$(document).ready(function() {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
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]
}]
});
});

為了能夠熟練使用Hightcharts，理解選項(xiàng)如何工作，如何才能以編程方式更改非常重要。下面是一些主要的JavaScript對象概念。

Highcharts選項(xiàng)被定義為對象文字。通過這種方式配置，我們可以得到一個(gè)清晰的、可讀性強(qiáng)的、低空間占用配置對象。下面的代碼和C型語言背景下開發(fā)更為相似。

// Bad code:
var options = new Object();

options.chart = new Object();
options.chart.renderTo = 'container';
options.chart.type = 'bar';

options.series = new Array();
options.series[0] = new Object();
options.series[0].name = 'Jane';
options.series[0].data = new Array(1, 0, 4);

JavaScript對象文字可以寫成下面這種形式。值得注意的是，兩種選項(xiàng)都會(huì)得到往前相同的結(jié)果。

// Good code:
var options = {
chart: {
renderTo: 'container',
type: 'bar'
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}]
};

在上面的例子中選項(xiàng)對象自行創(chuàng)建，可以通過傳遞到圖表函數(shù)被添加到圖表。

$(document).ready(function() {
var chart = new Highcharts.Chart(options);
});

對象創(chuàng)建好后，我們可以用點(diǎn)記法擴(kuò)大它的成員。x下面的代碼添加了另外的系列。請記住ptions.series是一個(gè)數(shù)組，所以需要push method。

options.series.push({
name: 'John',
data: [3, 4, 2]
})

另外一種，在JavaScript對象中有用，點(diǎn)符號和方括號是一樣的，因此，你可以通過他們的字符串名稱訪問所有成員。在代碼中可以是options.renderTo，也可以是options['renderTo']

全局選項(xiàng)

如果你想要在同一頁面設(shè)置全局，使用Highcharts.setOptions，代碼如下：

$(function() {
Highcharts.setOptions({
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
borderWidth: 2,
plotBackgroundColor: 'rgba(255, 255, 255, .9)',
plotShadow: true,
plotBorderWidth: 1
}
});

var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
},

xAxis: {
type: 'datetime'
},

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],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 3600 * 1000 // one hour
}]
});

var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container2',
type: 'column'
},

xAxis: {
type: 'datetime'
},

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],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 3600 * 1000 // one hour
}]
});
});

 部分可用選項(xiàng)設(shè)置，我們將會(huì)在后面的文章中講到。 有興趣的朋友可以下載Highcharts試用。

下載地址：>>點(diǎn)擊這里<<

相關(guān)教程：

Highcharts使用教程（1）：制作簡單圖表