Highcharts使用教程（2）：设置选项

---

Highcharts使用教程（2）：设置选项

使用教程 | 作者：走猫步的鱼 | 2013-12-11 09:33:25 | 阅读 16次 评论 1

概述：JavaScript图表工具Highcharts使用JavaScript对象结构定义选项或设置图表。本文将为大家讲解选项如何工作以及如何设置选项。

• Highcharts使用教程（1）：制作简单图表
• Highcharts使用教程（2）：设置选项

选项（options）

当你使用JavaScript图表工具Highcharts.Chart初始化图表，选项会是你的第一个参数。下面的代码（chart: {开始这一行）展现的为选项参数。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

$(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，理解选项如何工作，如何才能以编程方式更改非常重要。下面是一些主要的JavaScript对象概念。

Highcharts选项被定义为对象文字。通过这种方式配置，我们可以得到一个清晰的、可读性强的、低空间占用配置对象。下面的代码和C型语言背景下开发更为相似。

1 2 3 4 5 6 7 8 9 10 11

// 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对象文字可以写成下面这种形式。值得注意的是，两种选项都会得到往前相同的结果。

》》》全文

下载地址：>>点击这里<<

转载于:https://www.cnblogs.com/lgzoppa/p/3469338.html