首页 > 其他 > 详细

HighCharts操作案例

时间:2014-08-13 22:24:57      阅读:427      评论:0      收藏:0      [点我收藏+]
<%@ 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>

bubuko.com,布布扣

HighCharts操作案例,布布扣,bubuko.com

HighCharts操作案例

原文:http://blog.csdn.net/liupeng_family/article/details/38543347

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!