使用Highcharts制做简单图表

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

步骤一

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

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

 步骤二

添加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'
...
});

Prototype

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

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

var chart1; // globally available
$(function() {
chart1 = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdtoeur // predefined JavaScript array
}]
});
});

步骤三

如今咱们能够看到展示在网页上的图表：

步骤四

这一步可选。你能够为你的图表添加一个主题。经过设置Highcharts.setOptions实现。下载预约义主题，添加如下代码来操做：

<script type="text/javascript" src="/js/themes/gray.js"></script>