highcharts制作强大的页面图表

最新推荐文章于 2022-03-01 11:55:10 发布
最新推荐文章于 2022-03-01 11:55:10 发布
阅读量126 收藏
点赞数
文章标签： java javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/longgangbai/article/details/84089530
版权
官方网址：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;"> </td>
						<td width="10px" background="${pageContext.request.contextPath}/Public/Images/r_3.png"> </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
longgangbai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
数据可视化框架highcharts使用
JackLiu16的博客
12-28 709
charset="UTF-8" /> Highcharts src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> src="http://code.highcharts.com/highcharts.js"> id="container" style="width: 550px; height: 400px; margi
Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图
12-05
Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图 后台代码大家根据自己的情况写并转JSON格式。在前台修改url，即可出柱形图
highcharts mysql jsp_用Highcharts在jsp页面中绘制图表
weixin_32559133的博客
02-23 319
Highcharts 是一个用纯JavaScript编写的图标类库，提供了比较简单的方式来为网页插入漂亮的、交互式的图标。目前支持各种折线图、区域图、柱状图、散列图，以及几种图的混合使用，此外还支持仪表、地热、雷达、极区、金字塔、瀑布等专业的图表。和收费的FusionCharts和AnyCharts比起来，HighCharts免费(Free-Non-Commercial许可证)，并且扁平化的设计感...
用Highcharts 实现统计图展示
guolalala的博客
12-15 511
Highcharts 配置语法 我将为大家介绍使用 Highcharts 生成图表的一些配置。 第一步：创建 HTML 页面 创建一个 HTML 页面，引入 jQuery 和 Highcharts 库： 文件名：HighchartsTest.htm &lt;html&gt; &lt;head&gt; &lt;title&gt;Highcharts 测试&lt;/title&gt; ...
HighCharts的安装及使用
ingenuou_的博客
03-01 1481
1.配置HighCharts环境 1.1安装HighCharts npm install -S vue-highcharts npm install -S highcharts 1.2 在main.js全局引入 import highcharts from 'highcharts' import highcharts3d from 'highcharts/highcharts-3d' highcharts3d(highcharts); 2.HighCharts的使用 <div class="
Highcharts 图表制作系统 v6.0.3
11-27
Highcharts是一个制作图表的纯ja<x>vasc<x>ript类库。 主要特性如下： 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等； 对个人用户完全； 纯JS，无BS； 支持大部分的图表类型
Django Highcharts制作图表
09-21
Highcharts图表控件是目前使用最为广泛的图表控件 ,是纯JS图表库。这篇文章主要介绍了Django Highcharts制作图表的相关资料，非常的详细，有需要的小伙伴可以来参考下
jQuery Chart图表制作组件Highcharts用法详解
10-22
主要介绍了jQuery Chart图表制作组件Highcharts用法,详细分析了Highcharts插件的功能与具体使用技巧及相关注意事项,需要的朋友可以参考下
Echarts和Highcharts制作图表
07-23
本程序主要把echats和highcharts的基本图形进行了简单的绘制，有部分数据是写死的。如果关于从后台获取数据方面有问题，请直接私信。
highcharts综合大数据图表显示页面代码
05-03
highcharts综合大数据图表显示页面代码 highcharts综合大数据图表显示页面代码
highCharts图表应用-实现多种图表的显示
aichuxia4449的博客
07-24 469
在数据统计和分析业务中，有时需要在一个图表中将柱状图、饼状图、曲线图的都体现出来，即可以从柱状图中看出具体数据、又能从曲线图中看出变化趋势，还能从饼状图中看出各部分数据比重。highCharts可以轻松实现三图合一的效果。 还是以刚才降雨量为例，如果没有highCharts基础，请先参考“highCharts如何使用-强大的图表库插件”。和上个例子相比，修改的地方只...
Highcharts插件常见问题及解决办法
幸福的使者
07-22 1746
在jsp中使用Highchart的步骤： 第一步：引入highchart必需的js文件 1 2 3 4 5 6 7 8 9 10 11 12 <!-- -- jquery的js要在引入highchart插件的js之前引入 ----> <script src="js/
jsp使用highcharts 柱状图
hlvy
06-03 1120
如图:html代码：&lt;!DOCTYPE HTML&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8"&gt;&lt;link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico"&
vue使用highcharts遇到的坑
hlvy
10-27 3969
问题是首先我在data里面定义了个 titleName:'title'， titlestr:'heng' 接着在data里面定义了个 options:{ title:' ' .............此处代码省略  }     我想直接把titleName和titlestr拼接在一起赋值给title然后写了这样一段代码 options:{ title:this.title...
ImportError: No module named 'pandas'
u014520797的专栏
11-11 2242
环境：win10 64位  Python3.7 报错ImportError: No module named 'pandas' pip方式安装，执行以下命令即可 python -m pip install --upgrade pip pip install --user numpy scipy matplotlib jupyter pandas sympy nose  ...
QML中展示文件列表的listmodel:FolderListModel
wei375653972的博客
12-18 3681
import QtQuick 2.6 import QtQuick.Window 2.2 import Qt.labs.folderlistmodel 2.1 import QtQuick.Controls 1.4 Window { visible: true width: 640 height: 480 title: qsTr("Hello World")
解决使用pip命令时ModuleNotFoundError: No module named 'pip'问题
逸轩
01-08 999
Python学习遇到小问题：ModuleNotFoundError: No module named ‘pip’，想要装一下wxPython第三方库来写一下Python的GUI的时候发现cmd窗口下无法执行pip命令，想了想昨晚好像是pip命令行提示了我有新版本可以更新使用，更新之后也不成功，但昨晚没有怎么理会，以为没事，但今早起来一看发现pip命令都用不了了，出现了ModuleNotFoundE...
Axure—引用Highcharts图表
最新发布
05-26
可以通过以下步骤在Axure中引用Highcharts图表： 1. 在Highcharts官网上选择你需要的图表类型，然后生成相应的代码。 2. 将代码复制到Axure的HTML代码编辑器中。 3. 在Axure的页面中插入一个HTML Widget部件。 4. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值