Highcharts是一个使用javascript脚本来生成图表的工具,和jfreechart作用类似,都用来生成各种图表,并支持图片的导出和打印。从官网压缩表中的example中有各种图表的例子。要编写生成图表的例子建议从文件名后带basic的文件看起,看到例子后你会发现,highcharts使用起来时非常简单的,我们要做的仅仅是把数据组织好,让在页面onload时把数据设置到组件()中即可。一、改改自带的例子http://export./先来个例子:第一步:下载Highcharts--min-:nloadhttp://ajax./ajax/libs/jquery/.js第二步:创建一个html文件在文件的head标签部分,加入对相关js文件的引入:<scripttype="text/javascript"src="http://ajax./ajax/libs/jquery/.js"></script>Highcharts的核心文件<scripttype="text/javascript"src="../js/"></script>处理导出图片功能的js文件<scripttype="text/javascript"src="../js/modules/"></script>第三步:编写相关js代码在上面的导入js文件代码后继续加入以下代码: <!----> <scripttype="text/javascript"> varchart; $(document).ready(function(){ chart=({ chart:{ renderTo:'container', defaultSeriesType:'line', marginRight:130, marginBottom:25 }, title:{ text:'MonthlyAverageTemperature', x:-20//center }, subtitle:{ text:'Source:', 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'<b>'++'</b><br/>'+ +':'++'°C'; } }, legend:{ layout:'vertical', align:'right', verticalAlign:'top', x:-10, y:100, borderWidth:0 }, series:[{ name:'Tokyo', data:[,,,,,,,,,,,] },{ name:'NewYork', data:[-,,,,,,,,,,,] },{ name:'Berlin', data:[-,,,,,,,,,,,] },{ name:'London', data:[,,,,,,,,,,,] }] }); }); </script>第四步:准备存放图片的容器在<body>标签中加入:<divid="container"style="width:800px;height:400px;margin:0auto"></div>运行下试试。这样就完成了一个最基本的曲线图的例子。接下来的是如果我们要自己实现一个该怎么弄?很简单,修改例子代码就可以了,用不着自己重新写代码。先对比刚才写的例子的代码和效果,看看那些东西我们可以修改:很明显,标题的文字、纵轴的单位,横轴的文字,这些都要
highcharts--基本使用手册(中文API) 来自淘豆网m.daumloan.com转载请标明出处.
