Highcharts使用教程（1）：制作简单图表

今天我们要使用JavaScript图表Highcharts制作简单的柱形图，我们已经安装好Highcharts，让我们开始制作图表吧。

步骤一

在网页中添加一个div。设置id，设置图表长、高。代码如下：

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

步骤二

添加JavaScript标签初始化图表，放在网页任何地方都可，继续下面的jQuery代码：

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

$(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

1 2 3 4 5 6 7

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

Prototype

1 2 3 4 5 6 7

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

如果你嵌入Stock chart，这里有一个单独的构造函数方法——Highcharts.StockChart。在这张图表中图表以在一个单独的JavaScript数组提供，即不来自单独的JavaScript文件也不来自Ajax调用服务器。
​>>>>全文
​》》下载JavaScript图表Highcharts
​
​
​