1.认识Highcharts
HighCharts 界面美观,由于使用JavaScript编写,所以不需要像Flash和Java那样需要插件才可以运行,而且运行速度快。最新版本Highcharts-4.2.3.
特点:
1.兼容性:兼容当今大部分的浏览器,包括Safari、IE和火狐等。
2.图表类型:包括曲线图、区域图、柱状图、饼状图、散状点图和综合图表等。
3.不受语言约束:支持ASP,PHP,JAVA,.NET等。
4.提示功能:即将鼠标移动到某个数据点上,可以显示该点的详细数据,并且可以对显示效果进行设置。
5.导出:表格可导出为 PDF/ PNG/ JPG / SVG 格式。
6.输出:网页输出图表。
7.外部数据:从服务器载入动态数据。
2.下载Highcharts-4.2.3
3.Highcharts的实例
- <span style="font-size:14px;"><%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Insert title here</title>
- </head>
- <script src="/jquery/jquery.min.js"></script>
- <script src="/highcharts/highcharts.js"></script>
- <script type="text/javascript">
- $(function () {
- // create the chart
- names="";
- grades="";
- xx="";
- yy="";
- $.ajax({
- url:"<%=request.getContextPath()%>/list",
- async:false,
- success:function(data){
- //对数据进行查询遍历
- for ( var i in data) {
- var name=data[i].name;
- var grade=data[i].grade;
- names+=",'"+name+"'";
- grades+=","+grade+"";
- }
- xx = names.substring(1);
- xx="["+xx+"]";
- yy=grades.substring(1);
- yy="["+yy+"]";
- aa();
- },dataType:"json"
- });
- });
- //highcharts 图表展示
- function aa(){
- //定制树状图颜色
- /* Highcharts.setOptions({
- colors:['#8000ff']
- }); */
- //图表展示容器,与div的id保持一致
- $('#container').highcharts({
- chart: {
- //指定图表的类型,默认是折线图(line)
- type:"column",
- //定制树状图颜色
- backgroundColor: 'white',
- events: {
- load: function () {
- //鼠标附上去后提示信息
- var label = this.renderer.label('标题', 100, 120)
- .attr({
- fill: Highcharts.getOptions().colors[0],
- padding: 10,
- r: 5,
- zIndex: 8
- }).css({
- color: 'red'
- }).add();
- setTimeout(function () {
- label.fadeOut();
- }, 1000);
- }
- }
- },title: {
- //指定图表标题
- text:'成绩单',
- },
- //动态获取数据库的名字 就是所谓的X轴
- xAxis: {
- categories: eval(xx),
- },
- //动态获取数据
- series: [{
- animation: false,
- data: eval(yy),
- }],
- //Y轴标题
- yAxis:{
- title:{text:"成绩"}
- },
- });
- }
- </script>
- <body>
- <div id="container" style="min-width:400px;height:400px;"></div>
- </body>
- </html></span>