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;"> </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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值