`
longgangbai
  • 浏览: 7330964 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

highcharts制作强大的页面图表

 
阅读更多
官方网址：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

分享到：
| Struts2+JFreeChart制作图标
评论
发表评论

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

相关推荐

    jQuery+highcharts各种数据统计图表代码

    jQuery 和 Highcharts 是两个非常流行且强大的工具，结合使用可以创建出各种复杂的统计图表。本文将深入探讨如何利用 jQuery 和 Highcharts 实现数据统计图表的制作。 首先，jQuery 是一个广泛使用的 JavaScript 库...

    Highcharts漂亮大气的图表(纯JS)

    它以其灵活性、易用性和丰富的功能集而闻名，使得Web开发者无需深厚的图形设计背景也能制作出专业级别的图表。在本篇文章中，我们将深入探讨Highcharts的核心概念、使用方法以及如何通过纯JavaScript实现各种图表。 ...

    highcharts制作报表本地导出图片

    在"highcharts制作报表本地导出图片"这个主题中，我们将深入探讨如何使用Highcharts来构建报表，并实现用户可以在本地保存这些报表为图片的功能。 首先，我们需要了解Highcharts的基本用法。创建一个Highcharts图表...

    Django Highcharts制作图表

    Django Highcharts是一种结合了Python Django框架和JavaScript图表库Highcharts的解决方案，用于在Web应用中创建各种数据可视化图表。Highcharts是一个纯JavaScript的图表库，支持多种图表类型，如折线图、柱状图、...

    Highcharts使用教程（1）：制作简单图表

    在本教程中，我们将学习如何使用Highcharts制作一个简单的柱状图。首先，确保你已经正确地安装了Highcharts库，这是开始创建图表的前提。 **步骤一：创建HTML容器** 在HTML文档中，我们需要添加一个`div`元素作为...

    highcharts 漂亮图表

    Highcharts是一款强大的JavaScript图表库，用于在Web页面上创建各种互动式图表，如折线图、柱状图、饼图等。它以其易用性、灵活性和丰富的自定义选项而广受欢迎。在“highcharts 漂亮图表”这个主题中，我们将深入...

    jQuery Chart图表制作组件Highcharts用法详解

    Highcharts 是一个广泛使用的基于 JavaScript 的...总的来说，Highcharts 是一个功能强大且易于使用的图表库，无论你是一个前端开发者还是后端开发者，都能轻松地将其集成到你的项目中，创建出美观且功能丰富的图表。

    highcharts-4.1.6.zip

    在"index.htm"文件中，通常会有一个示例页面或者入门指南，展示了如何在HTML页面中引入Highcharts库并创建一个基本的图表。开发者可以通过查看和修改这个文件来学习如何使用Highcharts。 "js"文件夹内包含的是...

    tomcat 去读oracle数据库数据利用highcharts生成图表

    5. **Highcharts**：Highcharts是一个JavaScript库，用于创建动态、交互式的柱状图、折线图、饼图等各种图表。在本项目中，Highcharts.js用于将从数据库获取的数据转化为可视化图表展示在网页上。 6. **JavaScript*...

    Highcharts

    4. **教育领域**：教师可以使用Highcharts制作互动式教学材料，帮助学生理解数学概念。 总之，Highcharts作为一款强大的JavaScript图形库，为开发者提供了丰富的图表类型和高度定制化的选项，使其在各种Web应用中都...

    highcharts实现从mysql数据库获取数据生成折线图

    Highcharts是一个强大的JavaScript库，用于创建各种类型的交互式图表，包括折线图。本篇将详细介绍如何利用Highcharts结合MySQL数据库，实现在Web应用中动态生成折线图。 首先，我们需要了解Highcharts的基本使用。...

    HighCharts源码和示例. 2.05Version

    总的来说，HighCharts凭借其强大的功能、友好的API和广泛的示例，成为了一个值得推荐的JavaScript图表库，无论是在数据可视化还是在报表制作中，都能发挥重要作用。对于开发者来说，理解和掌握HighCharts，无疑能够...

    easyUI,Highcharts,时间控件例子

    这是一款强大的JavaScript图表库，用于在Web页面上生成各种动态、交互的统计图表，如折线图、柱状图、饼图、散点图等。`Highcharts`支持大量的自定义选项，可以灵活地调整颜色、样式、数据标签等，使得数据可视化...

    highcharts highstock

    - jQuery是一个强大的JavaScript库，简化了DOM操作、事件处理、动画制作和Ajax交互。在Highcharts和Highstock中，jQuery常用来初始化图表、处理用户交互和响应式设计。 - 在这个项目中，使用的是jQuery的精简版本...

    html+js+highcharts绘制圆饼图表的简单实例

    为了能够在页面上绘制图表，我们需要定义一个容器元素，该容器用来承载Highcharts生成的图表。在HTML文档的body部分，定义了一个div元素，其id为"pie_chart"。这个id将被Highcharts用作选项中的renderTo属性的值，...

    YcHighCharts:Highcharts是一个制作图表的纯Javascript类库，自主封装.net图表框架，支持webform和mvc3以上

    在 `.NET WebForm` 中使用 `YcHighCharts`，开发者可以将图表控件直接拖放到页面上，通过后台代码设置图表数据和配置，然后在前端自动渲染出对应的 `Highcharts` 图表。而在 `.NET MVC` 中，`YcHighCharts` 提供了...

    HighchartsAPI中文翻译(表格版)

    Highcharts是一款非常强大的JavaScript图表库，广泛应用于Web应用中展示动态的数据。本文档基于一份网上找到的可靠资料进行中文翻译整理，旨在帮助开发者更好地理解和使用Highcharts的各种配置选项。下面将详细介绍...

    jquery图表插件

    这些插件以其易用性、灵活性和丰富的功能集而受到广大开发者喜爱，使得非专业程序员也能轻松制作出高端、大气且美观的图表。在网页设计中，数据可视化是至关重要的，它能帮助用户快速理解复杂的信息，而jQuery图表...

    Highstock中文API

    Highstock中文API文档详细阐述了如何使用Highcharts库制作交互式图表。Highcharts是一个广泛使用的JavaScript图表库，它可以通过简单的配置和数据输入创建丰富的图表类型。文档包含了Highcharts的结构、API及其各个...

Magicbox
Global site tag (gtag.js) - Google Analytics