Highcharts 是一个使用 javascript 脚本来生成图表的工具,用来生成各种图表,并支持
图片的导出和打印。
从官网 www.highcharts.com 上下载的压缩表中的 example 中有各种图表的例子,看到
例子后你会发现,highcharts 使用起来时非常简单的,我们要做的仅仅是把数据组织好,
让在页面 onload 时把数据设置到组件(Highcharts)中即可。
一、 例子
第一步: 创建一页面文件在文件的 head 标签部分,加入对相关 js 文件的引入:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Highcharts 的核心文件
<script type="text/javascript" src="../js/highcharts.js"></script>
处理导出图片功能的 js 文件
<script type="text/javascript" src="../js/modules/exporting.js"></script>
第二步:编写相关 js 代码
在上面的导入 js 文件代码后继续加入以下代码:
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},