今天我们要使用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