Highcharts使用教程：设置选项
电脑软件
- 01
名称： Highcharts
- 02
大小： 13MB 版本： 3.0.7 类别： 开发工具 语言： 英文
- 03
应用平台： windows
- 04
选项（options） 当你使用JavaScript图表工具Highcharts.Chart初始化图表，选项会是你的第一个参数。下面的代码（chart: {开始这一行）展现的为选项参数。 $(document).ready(function() { varchart1 = newHighcharts.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，理解选项如何工作，如何才能以编程方式更改非常重要。下面是一些主要的JavaScript对象概念。 Highcharts选项被定义为对象文字。通过这种方式配置，我们可以得到一个清晰的、可读性强的、低空间占用配置对象。下面的代码和C型语言背景下开发更为相似。 // Bad code: varoptions = newObject(); options.chart = newObject(); options.chart.renderTo = 'container'; options.chart.type = 'bar'; options.series = newArray(); options.series[0] = newObject(); options.series[0].name = 'Jane'; options.series[0].data = newArray(1, 0, 4); JavaScript对象文字可以写成下面这种形式。值得注意的是，两种选项都会得到往前相同的结果。 // Good code: varoptions = { chart: { renderTo: 'container', type: 'bar' }, series: [{ name: 'Jane', data: [1, 0, 4] }] }; 在上面的例子中选项对象自行创建，可以通过传递到图表函数被添加到图表。 $(document).ready(function() { varchart = newHighcharts.Chart(options); }); 对象创建好后，我们可以用点记法扩大它的成员。x下面的代码添加了另外的系列。请记住ptions.series是一个数组，所以需要push method。 options.series.push({ name: 'John', data: [3, 4, 2] }) 另外一种，在JavaScript对象中有用，点符号和方括号是一样的，因此，你可以通过他们的字符串名称访问所有成员。在代码中可以是options.renderTo，也可以是options['renderTo'] 全局选项 如果你想要在同一页面设置全局，使用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 } }); varchart1 = newHighcharts.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 }] }); varchart2 = newHighcharts.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 }] }); });