highcharts制作强大的页面图表

最新推荐文章于 2022-05-10 15:59:07 发布
最新推荐文章于 2022-05-10 15:59:07 发布
阅读量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 生成图表
weixin_47678857的博客
05-28 141
highcharts 生成图表 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico"> <meta name="viewport" content="width=device-width, initial-
Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图
12-05
Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图 后台代码大家根据自己的情况写并转JSON格式。在前台修改url，即可出柱形图
highcharts综合大数据图表显示页面代码
05-03
highcharts综合大数据图表显示页面代码 highcharts综合大数据图表显示页面代码
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图表应用-实现多种图表的显示
aichuxia4449的博客
07-24 469
在数据统计和分析业务中，有时需要在一个图表中将柱状图、饼状图、曲线图的都体现出来，即可以从柱状图中看出具体数据、又能从曲线图中看出变化趋势，还能从饼状图中看出各部分数据比重。highCharts可以轻松实现三图合一的效果。 还是以刚才降雨量为例，如果没有highCharts基础，请先参考“highCharts如何使用-强大的图表库插件”。和上个例子相比，修改的地方只...
highchart的基本使用和部分美化
qq_48082548的博客
05-10 461
highchart的基本使用 使用highchart之前需要下载highchart的js 可以去官网看看并下载: https://www.highcharts.com.cn/demo/highcharts/spline-symbols 我直接选的下面这种方式 然后在需要 highchart 的地方进行导入 <script src="http://cdn.highcharts.com.cn/highcharts/10.0.0/highcharts.js"></script> 然
highcharts mysql jsp_用Highcharts在jsp页面中绘制图表
weixin_32559133的博客
02-23 319
Highcharts 是一个用纯JavaScript编写的图标类库，提供了比较简单的方式来为网页插入漂亮的、交互式的图标。目前支持各种折线图、区域图、柱状图、散列图，以及几种图的混合使用，此外还支持仪表、地热、雷达、极区、金字塔、瀑布等专业的图表。和收费的FusionCharts和AnyCharts比起来，HighCharts免费(Free-Non-Commercial许可证)，并且扁平化的设计感...
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/
pyecharts报错：No module named 'pyecharts.charts'
weixin_42754054的博客
06-03 1万+
想要开始使用pyecharts，但是在运行第一个例子的时候就报错了。。。。 问题描述 执行 import pyecharts是可以的，但是pyecharts下面的模块就报错（如图一）。 在交互环境下运行竟然是OK的（如图二）。 cmd中直接运行python Bar.py文件也是报与1相同的错。 分析 那么，首先想到的是，搞清Python的交互模式和直接运行.py文件有什么区别？ https...
Highcharts控件使用说明及注意事项， 错误: 'Highcharts' 未定义 错误: 'jb' 为空或不是对象
热门推荐
haojuntu的专栏
12-06 2万+
最近做项目需要用到报表，网上查询了一下，发现highcharts这个挺不错，并且是前台的。自己手动练习了几个小例子，出现的问题已有不同颜色标出。        第一部：引用类库 //第一引用 //第二引用       这里需要注意引用的先后顺序，位置不能颠倒，否则出现，错误: 'Highcharts' 未定义 //这个如果不需要打印功能，可以不引用        第二部：加入报表js
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图表入门
eck_燃的博客
10-12 2550
HighCharts图表入门 HighCharts的作用 ​ 在JavaEE企业级项目开发中，很多项目都会用到数据的统计和图表的展示功能，如：各种股票系统，银行的资金结算，公司的财务报表，等等。如何快速高效的开发这些图表是一件麻烦的事。 HighCharts可以非常方便的实现这个功能 ​ HighCharts是非常棒的一个jQuery插件，和大多数的浏览器都兼容。支持很多类型的图表。并且是动态的插...
vue中使用echarts+Highmaps开发数据可视化大屏(数据分析/数据看板/科技感页面)
web小袋鼠
06-28 7899
echarts和highchart的区别 echarts echarts的前身是百度公司前端开发的一个图表库，后捐献给阿帕奇公司维护。 支持柱状图、饼状图、k线图、map图、热导向图、折线图等常用图表， 主要采用canvas画图。 highchart highcharts是国外的一家公司开发的图表库，主要采用svg画图。 支持的图表也很多，功能也比较强大。 到底是使用echarts还是使用highchart呢？(萝卜青菜各有所爱，当然你也可以选择G2等一些图表库) 此项目之所以使用echarts+highc
highchart介绍与使用
qq_44679744的博客
01-03 622
highchart概述 ①Highcharts 是一个用纯JavaScript编写的一个图表库。 ②Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表 ③Highcharts 免费提供给个人学习、个人网站和非商业用途使用。 特性 ◉兼容性 - 支持所有主流浏览器和移动平台（android、iOS等）。 ◉多设备 - 支持多种设备，如手持设备 iPhone/iP...
Axure—引用Highcharts图表
最新发布
05-26
可以通过以下步骤在Axure中引用Highcharts图表： 1. 在Highcharts官网上选择你需要的图表类型，然后生成相应的代码。 2. 将代码复制到Axure的HTML代码编辑器中。 3. 在Axure的页面中插入一个HTML Widget部件。 4. 将Highcharts代码粘贴到HTML Widget的编辑器中。 5. 调整Widget的大小和位置，以适应你的页面布局。 这样就可以在Axure中引用Highcharts图表了。注意，你需要了解一些基本的HTML和JavaScript知识，才能正确地使用Highcharts。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值