<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'TestHighCharts.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script src="<%=basePath%>highcharts/themes/gray.js"></script> <script src="<%=basePath%>highcharts/jquery-1.10.0.min.js"></script> <script src="<%=basePath%>highcharts/highcharts.js"></script> <script src="<%=basePath%>highcharts/exporting.js"></script> <script> $(function () { $('#container').highcharts({//图表展示容器,与div的id保持一致 chart: { type: 'line'//指定图表的类型,默认是折线图(line) }, credits:{ enabled:false // 禁用版权信息 }, title: { text: '财务信息统计'//指定图表标题 }, /* subtitle: { text: '副标题' }, */ xAxis: { title:{ text:'时间段' }, categories: ['2014-08-11','2014-08-12','2014-08-13'],//指定x轴分组 //gridLineWidth:1, }, yAxis: { title:{ text:'金额' }, labels: {//格式化纵坐标的显示风格 formatter: function() { return this.value ; } } }, series: [{//指定数据列 name: '应收金额', //数据列名 marker: {//节点以方块形式显示 symbol: 'square' }, data: [100,500,300] //数据 }, { name: '实际到账金额', data: [350,200,600] }], tooltip: { crosshairs: true,//显示竖的分割线 shared: true,//两个节点数据框共享 /* enabled: true,//每个节点显示数据框 formatter: function() {//格式化每个节点数据框 return '<b>'+ this.x +'</b><br>'+ this.series.name +': '+ this.y; } */ }, plotOptions: {//为每个节点显示值 line: { dataLabels: { enabled: true }, enableMouseTracking: true }, }, }); }); //credits.enabled=false; </script> </head> <body> <div id="container" style="min-width:800px;height:400px"></div> </body> </html>
原文:http://blog.csdn.net/liupeng_family/article/details/38543347