今天我们要使用JavaScript图表制作简单的柱形图，我们已经安装好Highcharts，让我们开始制作图表吧。
步骤一
在网页中添加一个div。设置id，设置图表长、高。代码如下：
步骤二
添加JavaScript标签初始化图表，放在网页任何地方都可，继续下面的jQuery代码：
$(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
window.addEvent('domready', function() {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
...
});
阅读(907) | 评论(0) | 转发(0) |
