highcharts制作强大的页面图表

longgangbai

浏览: 7250408 次
性别:
来自: 上海

最近访客更多访客>>

paladin1988

ljq867

yuxiangtong

chen88358323

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

常用Javascript的开发应用

官方网址：http://www.highcharts.com/

1、什么是HighCharts？

     • Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在您的web网站或是web应用程序添加有交互性的图表。

     • 目前HighCharts支持的图表类型有直线图、曲线图、区域图、区域曲线图、柱状图、饼状图和散状点图。

2、HighCharts的主要特点？

     •速度快，看起来很雅致,界面漂亮。

    •不像Flash或Java需要插件才可使用。

    •弹出窗口是沒有问题的。可以在当前的浏览器窗口中打开內容。

    •单点击。弹出的內容在当前浏览器窗口中，用户还可以在保留当前弹出內容的情況下继续滚动网页而不需要关闭它。

    •大量的配置选项和可扩展性。一个组件系統可让您未使用的功能压缩到一个10kB的文件大小。

    •出色的，无条件的和不限用户身分，包含支持商业和非商业用户。

    •具有良好的兼容性和可访问性，当用户在Javascrip 失效的情況下，或是使用早期版本的浏览器，浏览器仍然会重定向到图片本身或事先指定的HTML页。

    •包含js源码，有余力的同志可以研究下源码。

这里简单的东拼西凑的简单介绍，不是重点，简单看下，就过去，接下来第二篇将介绍HighCharts的构成。

使用过程如下：

   1.导入highcharts相关的js。

   2.编写相关的highcharts的数据脚本，可以到highcharts官方网站，选择适合自己项目需求的。

   3.在页面设置相关的highcharts的div容器。绑定相关的图表。

<!-- 
	FileName: inspectRealTimeView.jsp
	Author: longgangbai
	Description: 巡检统计报表查看页面
 -->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>巡检统计报表展示</title>
		<jsp:include page="/common.jsp"></jsp:include>
		<base target="_self">
		
 <script type="text/javascript" src="${pageContext.request.contextPath}/Public/Scripts/My97DatePicker/WdataPicker.js"></script>
 
		<!-- 1. Add these JavaScript inclusions in the head of your page -->
		<script type="text/javascript" src="${pageContext.request.contextPath}/Public/Scripts/jquery/jquery-1.4.2.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/Public/Scripts/chart/highcharts.js"></script>
		
		<!-- 1a) Optional: add a theme file -->
		<!--
			<script type="text/javascript" src="${pageContext.request.contextPath}/Public/Scripts/chart/themes/gray.js"></script>
		-->
		
		<!-- 1b) Optional: the exporting module -->
		<script type="text/javascript" src="${pageContext.request.contextPath}/Public/Scripts/chart/modules/exporting.js"></script>
		
		
		<!-- 2. Add the JavaScript to initialize the chart on document ready -->
		<script type="text/javascript">
		
		var chart;
		$(document).ready(function() {
			var unfinishStr="<s:property value='stationChart.unfinishPercent'/>";
			var unfinish=parseFloat(unfinishStr);
			var finishStr="<s:property value='stationChart.finishPercent'/>";
			var finish=parseFloat(finishStr);
			chart = new Highcharts.Chart({
				chart: {
					renderTo: 'container',
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false
				},
				title: {
					text: '车站巡检统计图表分析'
				},
				tooltip: {
					formatter: function() {
						return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
					}
				},
				plotOptions: {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: false
						},
						showInLegend: true
					}
				},
			    series: [{
					type: 'pie',
					name: '车站统计完成率',
					data: [
						{
							name: '未完成',    
							y: unfinish,
							sliced: true,
							selected: true
						},
						['完成',    finish],
					]
				}]
			});
		});
		</script>
	</head>
	
	<body>
	<!-- cellpadding="0px" cellspacing="0px" width="100%" height="100%" -->
	<table  cellpadding="0" cellspacing="0" style="width:100%; background-color:#F3F7FA; border:#CBE0F7 1px solid;" >
	<tbody>
		<tr>
			<td>
				<!-- 标题 开始 -->
				<table width="100%" height="29" align="center" cellpadding="0" cellspacing="0">
					<tr>
						<td width="190" background="${pageContext.request.contextPath}/Public/Images/r_1.png" style="background-repeat: no-repeat;">
							<div class="s_title"><span>巡检统计报表展示</span></div>
						</td>
						<td background="${pageContext.request.contextPath}/Public/Images/r_2.png" style="background-repeat: repeat-x;">&nbsp;</td>
						<td width="10px" background="${pageContext.request.contextPath}/Public/Images/r_3.png">&nbsp;</td>
					</tr>
				</table>
				<!-- 标题 结束 -->
			</td>
		</tr>
		<tr>
			<td>
				<!-- 搜索过滤栏 开始 -->
				<form name="queryForm" id="queryForm" method="post" action="stationTaskReportList.action">
				<table cellpadding="0" cellspacing="0" style="width:100%; background-color:#F3F7FA; border:#CBE0F7 1px solid;">
				<tbody>
					<tr>
						<td valign="middle">
							<!-- 过滤条件 开始 -->
							<table width="100%">
								<tbody>
								
								   <tr >
										<td width="16%" class="font9_cu_9" align="right">
											起始时间：
										</td>
										<td width="34%">
                                              <input type="text" id="stationTask.startDate" name="stationTask.startDate"    onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'stationTask.endDate\')||\'2099-10-01\'}'})"/> 
                                              <img onclick="WdatePicker({el:'stationTask.startDate'})" src="${pageContext.request.contextPath}/Public/Scripts/My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle">
										</td>
										<td width="16%" class="font9_cu_9" align="right">
											结束时间：
										</td>
										<td width="34%">
                                              <input type="text" id="stationTask.endDate" name="stationTask.endDate"    onFocus="WdatePicker({minDate:'#F{$dp.$D(\'stationTask.startDate\')}',maxDate:'2099-10-01'})"/>
                                              <img onclick="WdatePicker({el:'stationTask.endDate'})" src="${pageContext.request.contextPath}/Public/Scripts/My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle"
                                            />
									</tr>
									<tr>
										<td width="16%" class="font9_cu_9" align="right">
											关注车站：
										</td>
										<td width="34%">
											<input type="text" width="80%"  class="input_M" name="taskInfo.stationName" value="<s:property value="taskInfo.stationName"/>" id="stationName" readOnly/>
											<input type="hidden" name="taskInfo.stationCode" value="<s:property value="taskInfo.stationCode"/>" id="stationCode" />
											<input type="button" name="selectStation" value="选择" onclick="selectStationList();"/>
											<input type="button" name="clearStation" value="清除" onclick="clearStationList();"/>
										</td>
										<td width="16%" class="font9_cu_9" align="right">
											关注人：
										</td>
										<td width="34%">
											<input type="text" width="80%"  class="input_M" name="taskInfo.terminatorName" value="<s:property value="taskInfo.terminatorName"/>" id="userName" readOnly/>
											<input type="hidden" name="taskInfo.terminator" value="<s:property value="taskInfo.terminator"/>" id="userCode" />
											<input type="hidden" name="userStationCode" value="<s:property value="taskInfo.stationCode"/>" id="userStationCode" />
											<input type="button" name="selectUser" value="选择" onclick="selectUserList();"/>
											<input type="button" name="clearUser" value="清除" onclick="clearUserList();"/>
										</td>
									</tr>
								<tr >
								   	<td  colspan="4" width="100%" align="right" valign="middle" style="float:right; width:200px; background:url(${pageContext.request.contextPath}/Public/Images/r_bg2.jpg) no-repeat;">
									<!-- 搜索按钮 开始 -->
										<table width="100%" height="100%">
											<tbody align="right">
												<tr >
													<td align="right" width="100%" ><input id="query" name="query" type="submit" value="刷新"  /></td>
												</tr>
											</tbody>
										</table>
									<!-- 搜索按钮 结束 -->
									</td>
								</tr>
								</tbody>
							</table>
							<!-- 过滤条件 结束 -->
						</td>
					</tr>
				</tbody>
				</table>
				</form>
				<!-- 搜索过滤栏 结束 -->
				
			</td>
		</tr>
		
		<tr>
         
         <td>
          <!-- 车站巡检分析展示 -->
         	<table >
	  <tr>
	    <td>
	    <!-- 车站巡检分析饼状分析图表 -->
	    <div id="container" style="width: 40%; height: 60%; margin: 0 auto"></div>
	    </td>
	    <td  width="100%"  >
	    	<!-- 共享池 开始 -->
				<div id="sharingPool_div" class='sharingPool_div' align="center">
				 <!-- 车站巡检分析饼状分析列表展示 -->
				      <table cellpadding="1" cellspacing="1"  style="width:100%; background-color:#F3F7FA; border:#CBE0F7 1px solid;">
					    <tr  class='fixed'>
					       <th align="center" style="display: inline-block;" >车站</th>
					       <th align="center" style="display: inline-block;">人员姓名</th>
					       <th align="center" style="display: inline-block;" >车站巡检任务总量</th>
					       <th align="center" style="display: inline-block;">车站完成率</th>
					       <th align="center" style="display: inline-block;">个人完成率</th>
					    </tr>
					      <s:if test="null!=stationTaskReportList&&!stationTaskReportList.isEmpty()">
					          <s:iterator id="station" value="stationTaskReportList">
					          <tr  class='fixed'>
					          <td align="center" style="display: inline-block;">
					            <s:property value="#station.stationCode"/>
					            </td>
					          <td align="center">
					            <s:property value="#station.userCode"/>
					          </td>
					          <td align="center">
					             <s:property value="#station.stationPlanObjectNum"/>
					          </td >
					          <td align="center">
					            <s:property value="#station.stationDoneObjectNum"/>
					          </td>
					          <td align="center">
					            <s:property value="#station.personDoneObjectNum"/>
					          </td>
					          </tr>
			               </s:iterator>
					      </s:if>
					</table>
               </div>
				<!-- 共享池 结束 -->
	    </td>
	  </tr>
	</table>
         </td>
		</tr>
	</tbody>
	</table><body><html>

相关的highcharts 需要的js和样式。
highcharts的几个问题：
1.在右边下方有一个网络连接。
   在highcharts.js或者highcharts.src.js中使用替换将www.highcharts.com替换为#
2.在生成的图表中的打印按钮和导出按钮的屏蔽。
   在页面不要导入exporting.src.js或者exporting.js的js即可。
概述exporting.js文件
里的exporting.js文件在项目中起打印图表转图片文件的作用
   但由于部分功能链接官网去调用方法，所以在非联机的情况，且对图表没有打印功能要求，可以将其屏蔽

补充
Highcharts 官网：http://www.highcharts.com

Highcharts 官网示例：http://www.highcharts.com/demo/

Highcharts 官网文档：http://www.highcharts.com/documentation/how-to-use

chart.rar (260.2 KB)
下载次数: 45

分享到：

REST WebService简单应用 | Struts2+JFreeChart制作图标

2011-11-26 13:58
浏览 4753
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论