JS图表组件 highcharts 简单的介绍
fmms
12年前
把highcharts拿来做个简单的介绍，希望更多的朋友可以用到这个用来做图表的js插件。 <h1>preparation</h1> <p><strong>Highcharts</strong></p> <p>Highcharts是一个制作图表的纯Javascript类库，主要特性如下：</p> <ul> <li>兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；</li> <li>对个人用户完全免费；</li> <li>纯JS，无BS；</li> <li>支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；</li> <li>跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库；</li> <li>提示功能：鼠标移动到图表的某一点上有提示信息；</li> <li>放大功能：选中图表部分放大，近距离观察图表；</li> <li>易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表；</li> <li>时间轴：可以精确到毫秒</li> </ul> <p><strong>下载插件</strong></p> <p>Highcharts下载地址</p> <p><a href="/misc/goto?guid=4958538161997223176">http://www.highcharts.com/download</a></p> <p>jquery下载地址</p> <p><a title="http://jquery.com/" href="/misc/goto?guid=4958183308549259819">http://jquery.com/</a></p> <p>开发环境：</p> <p>System：xp JDK:1.5 Tomcat：5.X Myeclipse：6.5</p> <p>jquery：jquery-1.6.3.min.js</p> <p>highcharts：Highcharts-2.1.9</p> <p>项目环境：</p> <p><a href="https://simg.open-open.com/show/ddbc0d1e1b0dd1cdd66a6ca1e6d91823.jpg"><img style="border-bottom:0px;border-left:0px;display:inline;border-top:0px;border-right:0px;" title="1" border="0" alt="" src="https://simg.open-open.com/show/2da2260242b77641586807ea8bad2f05.jpg" width="310" height="344" /></a> 注：红色的地方即为本次介绍需要的文件部分。</p> <h1>start</h1> <p>代码如下：</p> <p>本次介绍是把highcharts中的第一个文件拷贝过来，然后把其他的功能加在了这个文件中，然后查询相关资料，解决了链接以及打印导出等。</p> <pre class="brush:html; toolbar: true; auto-links: false;"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highcharts Example---基本的曲线图</title> <!-- 1.引入jquery库 --> <script type="text/javascript" src="js/jquery-1.6.3.min.js"></script> <!-- 2.引入highcharts的核心文件 --> <script type="text/javascript" src="js/highcharts.js"></script> <!-- 3.引入导出需要的js库文件 --> <script type="text/javascript" src="js/exporting.js"></script> <!--4.js脚本--> <script type="text/javascript"> var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', defaultSeriesType: 'line',//图表类别，可取值有：line、spline、area、areaspline、bar、column等 marginRight: 130, marginBottom: 25 }, title: { text: '襄阳(一级标题)',//设置一级标题 x: -20 //center }, subtitle: { text: '2011温度各区对比(二级标题)',//设置二级标题 x: -20 }, xAxis: { categories: ['2011/1', '2011/2', '2011/3', '2011/4', '2011/5', '2011/6', '2011/7', '2011/8', '2011/9', '2011/10', '2011/11', '2011/12']//设置x轴的标题 }, yAxis: { title: { text: '温度 (°C)'//设置y轴的标题 }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y +'°C';//鼠标放在数据点的显示信息，但是当设置显示了每个节点的数据项的值时就不会再有这个显示信息 } }, legend: { layout: 'vertical', align: 'left',//设置说明文字的文字 left/right/top/ verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, exporting:{ enabled:true //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示 }, plotOptions: { line: { dataLabels: { enabled: true //显示每条曲线每个节点的数据项的值 }, enableMouseTracking: false } }, series: [{ name: '襄城',//每条线的名称 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: '樊城', marker:{ symbol:"square" }, data: [{ y:-3, marker:{ symbol:'url(sun.png)'//在线上的某个点显示图标 } }, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] }, { name: '襄州', 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: '东津', 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] },{ name: '鱼梁州', 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] }] }); }); </script> </head> <body> <!--5.导入容器用于显示图表--> <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div> </body> </html></pre> <h1>result</h1> <p>访问的url如下：<a title="http://localhost:8080/JFreeChart/highcharts/highcharts1.html" href="/misc/goto?guid=4959500190802180716">http://localhost:8080/JFreeChart/highcharts/highcharts1.html</a></p> <p><a href="https://simg.open-open.com/show/36522768991b38c793a39d3e0199cc91.png"><img style="border-bottom:0px;border-left:0px;width:669px;display:inline;height:330px;border-top:0px;border-right:0px;" title="image" border="0" alt="" src="https://simg.open-open.com/show/43d17071669391981363622fa199606b.png" /></a></p> <p>以下做几点说明：</p> <p>（1）去掉或更改图片右下角的链接</p> <p>在highcharts.js文件中搜索credits字符串，找到如下的字符串，</p> <p><a href="https://simg.open-open.com/show/91355e3b1e9196370485b5b8f7d5e5e2.png"><img style="border-bottom:0px;border-left:0px;display:inline;border-top:0px;border-right:0px;" title="image" border="0" alt="" src="https://simg.open-open.com/show/baa3675caaa48fcb408357c1489b7b36.png" width="651" height="66" /></a></p> <p>enabled:设置是否显示链接</p> <p>text：设置链接显示的名称</p> <p>href：设置链接的url</p> <p>（2）去掉图片右上角的打印及导出按钮</p> <p>在js中设置以下代码：</p> <p>exporting:{ <br /> enabled:true //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示 <br /> },</p> <p>（3）点击图片左边的以下文字，当一次单击会隐藏某一条曲线，再次单击会显示该条曲线</p> <p><a href="https://simg.open-open.com/show/1df9bd4fcf92ca9ba54482e577272045.png"><img style="border-bottom:0px;border-left:0px;display:inline;border-top:0px;border-right:0px;" title="image" border="0" alt="" src="https://simg.open-open.com/show/e986a29a2c738e57b1fe89c7642136f0.png" width="92" height="94" /></a></p> <p></p> 转自： <a href="/misc/goto?guid=4959500190916916577" target="_blank">http://www.cnblogs.com/java-pan/archive/2011/12/31/highcharts.html</a>