highcharts--基本使用

《highcharts--基本使用》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Highcharts是一个使用javascript脚本来生成图表的工具，和jfreechart作用类似，都用来生成各种图表，并支持图片的导出和打印。从官网www.highcharts.com上下载的压缩表中的example中有各种图表的例子。要编写生成图表的例子建议从文件名后带basic的文件看起，看到例子后你会发现，highcharts使用起来时非常简单的，我们要做的仅仅是把数据组织好，让在页面onload时把数据设置到组件（Highcharts.Chart）中即可。一、改改自带的例子先来个例子：第一步：下载Highcharts-

2、2.1.3.zip包和jquery-min-1.4.2.js以下两个文件的下载地址：http://www.highcharts.com/downloadhttp://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js第二步：创建一个html文件在文件的head标签部分，加入对相关js文件的引入：Highcharts的核心文件处理导出图片功能的js文件第三步：编写相关js代码在上面的导入js文件代码后继续加入以下代码：varchart;$(document).ready(function(){chart=newHighcharts.Chart({chart:{renderTo:'container',defaultSeriesType:'line',marginRight:130,marginBottom:25},title:{text:'MonthlyAverageTemperature',x:-20//center},subtitle:{text:'Source:Worl

5、dClimate.com',x:-20},xAxis:{categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']},yAxis:{title:{text:'Temperature(°C)'},plotLines:[{value:0,width:1,color:'#808080'}]},tooltip:{formatter:function(){return''+this.series.name+'
'

6、+this.x+':'+this.y+'°C';}},legend:{layout:'vertical',align:'right',verticalAlign:'top',x:-10,y:100,borderWidth:0},series:[{name:'Tokyo',data:[7.0,6.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6]},{name:'NewYork',data:[-0.2,0.8,5.7,11.3,17.0,22.0,24.8,24.1,20.1,14.1

7、,8.6,2.5]},{name:'Berlin',data:[-0.9,0.6,3.5,8.4,13.5,17.0,18.6,17.9,14.3,9.0,3.9,1.0]},{name:'London',data:[3.9,4.2,5.7,8.5,11.9,15.2,17.0,16.6,14.2,10.3,6.6,4.8]}]});});第四步：准备存放图片的容器在标签中加入：

8、>