- 浏览: 7325627 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (1546)
- 企业中间件 (236)
- 企业应用面临的问题 (236)
- 小布Oracle学习笔记汇总 (36)
- Spring 开发应用 (54)
- IBatis开发应用 (16)
- Oracle基础学习 (23)
- struts2.0 (41)
- JVM&ClassLoader&GC (16)
- JQuery的开发应用 (17)
- WebService的开发应用 (21)
- Java&Socket (44)
- 开源组件的应用 (254)
- 常用Javascript的开发应用 (28)
- J2EE开发技术指南 (163)
- EJB3开发应用 (11)
- GIS&Mobile&MAP (36)
- SWT-GEF-RCP (52)
- 算法&数据结构 (6)
- Apache开源组件研究 (62)
- Hibernate 学习应用 (57)
- java并发编程 (59)
- MySQL&Mongodb&MS/SQL (15)
- Oracle数据库实验室 (55)
- 搜索引擎的开发应用 (34)
- 软件工程师笔试经典 (14)
- 其他杂项 (10)
- AndroidPn& MQTT&C2DM&推技术 (29)
- ActiveMQ学习和研究 (38)
- Google技术应用开发和API分析 (11)
- flex的学习总结 (59)
- 项目中一点总结 (20)
- java疑惑 java面向对象编程 (28)
- Android 开发学习 (133)
- linux和UNIX的总结 (37)
- Titanium学习总结 (20)
- JQueryMobile学习总结 (34)
- Phonegap学习总结 (32)
- HTML5学习总结 (41)
- JeeCMS研究和理解分析 (9)
最新评论
-
lgh1992314:
[u][i][b][flash=200,200][url][i ...
看看mybatis 源代码 -
尼古拉斯.fwp:
图片根本就不出来好吧。。。。。。
Android文件图片上传的详细讲解(一)HTTP multipart/form-data 上传报文格式实现手机端上传 -
ln94223:
第一个应该用排它网关吧 怎么是并行网关, 并行网关是所有exe ...
工作流Activiti的学习总结(八)Activiti自动执行的应用 -
ZY199266:
获取不到任何消息信息,请问这是什么原因呢?
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息 -
xiaoyao霄:
DestinationSourceMonitor 报错 应该导 ...
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息
官方网址: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容器。绑定相关的图表。
相关的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
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
- chart.rar (260.2 KB)
- 下载次数: 45
发表评论
-
【转】互联网常见Open API文档资源
2012-07-17 17:22 2410原文出处:http://www.williamlong.i ... -
【转】JavaScript编程模式:模块的力量
2012-07-06 12:50 1878块模式是一个常用的JavaScript编程模式。它 ... -
【转】JavaScript闭包和模块模式
2012-07-06 12:45 2053原文:http://www.joezimj ... -
JS 在IE和FireFox中的区别(三)
2009-12-26 18:45 3098(7)form表单提交问题 ... -
JS 在IE和FireFox中的区别(二)
2009-12-26 18:44 210210. const 问题现有问题:IE:不支持 const ... -
JS 在IE和FireFox中的区别
2009-12-26 18:43 23361. HTML 对象的 id 作为对象名的问题IE:HT ... -
window.showModalDialog()方法用例
2009-12-19 18:31 2117项目中使用到的父子窗体交互,仅有一个参数,想传递多个参数,其 ... -
js 父子窗体交互
2009-12-19 18:29 34151>父窗体是使用window.open(url,name ... -
js 时间工具类的应用
2009-11-21 15:08 2329项目中使用的时间工具类,主要针对javascript中 ... -
企业中使用MapAbc开发应用
2009-08-22 09:41 2949在项目中使用地图时必须考虑企业的访问量和各种Map ... -
Ajax 常用代码
2009-06-14 09:15 1876Ajax的工作原理 使用Ajax的主要原因:1、通 ... -
js操作select控件大全(包含新增、修改、删除、选中、清空、判断存在等)
2009-06-14 08:43 2975js 代码// 1.判断select选项中 是否存在Value ... -
JS的正则表达式
2009-05-17 09:10 1753校验是否全由数字组成 [code] function ... -
40种网页常用小技巧
2009-05-14 19:40 16901. oncontextmenu="window.e ... -
Ajax的学习应用
2009-05-11 17:01 1881Ajax的常用方式在java web 中的开发的应用代码如下: ... -
Prototype的源码分析
2009-05-11 16:52 2559/**这个文件是对xmlhttp ... -
XMLHTTP对象的API详解
2009-05-11 16:51 5046XMLHttpRequest 提供客户端同http服务器通 ... -
prototype的学习使用(二) Ajax的局部更新
2009-05-11 13:13 1913Ajax对象 上面提到的共通方法非常好,但是面对它吧,它们 ... -
prototype的学习使用(一)
2009-05-11 13:05 2050一些实用的函数这个类库带有很多预定义的对象和实用函数,这些东 ... -
iframe高度自适应问题
2009-05-09 08:15 3376iframe高度自适应问题是个难题,至少困扰了我很久,通过go ...
相关推荐
jQuery 和 Highcharts 是两个非常流行且强大的工具,结合使用可以创建出各种复杂的统计图表。本文将深入探讨如何利用 jQuery 和 Highcharts 实现数据统计图表的制作。 首先,jQuery 是一个广泛使用的 JavaScript 库...
它以其灵活性、易用性和丰富的功能集而闻名,使得Web开发者无需深厚的图形设计背景也能制作出专业级别的图表。在本篇文章中,我们将深入探讨Highcharts的核心概念、使用方法以及如何通过纯JavaScript实现各种图表。 ...
在"highcharts制作报表本地导出图片"这个主题中,我们将深入探讨如何使用Highcharts来构建报表,并实现用户可以在本地保存这些报表为图片的功能。 首先,我们需要了解Highcharts的基本用法。创建一个Highcharts图表...
Django Highcharts是一种结合了Python Django框架和JavaScript图表库Highcharts的解决方案,用于在Web应用中创建各种数据可视化图表。Highcharts是一个纯JavaScript的图表库,支持多种图表类型,如折线图、柱状图、...
在本教程中,我们将学习如何使用Highcharts制作一个简单的柱状图。首先,确保你已经正确地安装了Highcharts库,这是开始创建图表的前提。 **步骤一:创建HTML容器** 在HTML文档中,我们需要添加一个`div`元素作为...
Highcharts是一款强大的JavaScript图表库,用于在Web页面上创建各种互动式图表,如折线图、柱状图、饼图等。它以其易用性、灵活性和丰富的自定义选项而广受欢迎。在“highcharts 漂亮图表”这个主题中,我们将深入...
Highcharts 是一个广泛使用的基于 JavaScript 的...总的来说,Highcharts 是一个功能强大且易于使用的图表库,无论你是一个前端开发者还是后端开发者,都能轻松地将其集成到你的项目中,创建出美观且功能丰富的图表。
在"index.htm"文件中,通常会有一个示例页面或者入门指南,展示了如何在HTML页面中引入Highcharts库并创建一个基本的图表。开发者可以通过查看和修改这个文件来学习如何使用Highcharts。 "js"文件夹内包含的是...
5. **Highcharts**:Highcharts是一个JavaScript库,用于创建动态、交互式的柱状图、折线图、饼图等各种图表。在本项目中,Highcharts.js用于将从数据库获取的数据转化为可视化图表展示在网页上。 6. **JavaScript*...
4. **教育领域**:教师可以使用Highcharts制作互动式教学材料,帮助学生理解数学概念。 总之,Highcharts作为一款强大的JavaScript图形库,为开发者提供了丰富的图表类型和高度定制化的选项,使其在各种Web应用中都...
Highcharts是一个强大的JavaScript库,用于创建各种类型的交互式图表,包括折线图。本篇将详细介绍如何利用Highcharts结合MySQL数据库,实现在Web应用中动态生成折线图。 首先,我们需要了解Highcharts的基本使用。...
总的来说,HighCharts凭借其强大的功能、友好的API和广泛的示例,成为了一个值得推荐的JavaScript图表库,无论是在数据可视化还是在报表制作中,都能发挥重要作用。对于开发者来说,理解和掌握HighCharts,无疑能够...
这是一款强大的JavaScript图表库,用于在Web页面上生成各种动态、交互的统计图表,如折线图、柱状图、饼图、散点图等。`Highcharts`支持大量的自定义选项,可以灵活地调整颜色、样式、数据标签等,使得数据可视化...
- jQuery是一个强大的JavaScript库,简化了DOM操作、事件处理、动画制作和Ajax交互。在Highcharts和Highstock中,jQuery常用来初始化图表、处理用户交互和响应式设计。 - 在这个项目中,使用的是jQuery的精简版本...
为了能够在页面上绘制图表,我们需要定义一个容器元素,该容器用来承载Highcharts生成的图表。在HTML文档的body部分,定义了一个div元素,其id为"pie_chart"。这个id将被Highcharts用作选项中的renderTo属性的值,...
在 `.NET WebForm` 中使用 `YcHighCharts`,开发者可以将图表控件直接拖放到页面上,通过后台代码设置图表数据和配置,然后在前端自动渲染出对应的 `Highcharts` 图表。而在 `.NET MVC` 中,`YcHighCharts` 提供了...
Highcharts是一款非常强大的JavaScript图表库,广泛应用于Web应用中展示动态的数据。本文档基于一份网上找到的可靠资料进行中文翻译整理,旨在帮助开发者更好地理解和使用Highcharts的各种配置选项。下面将详细介绍...
这些插件以其易用性、灵活性和丰富的功能集而受到广大开发者喜爱,使得非专业程序员也能轻松制作出高端、大气且美观的图表。在网页设计中,数据可视化是至关重要的,它能帮助用户快速理解复杂的信息,而jQuery图表...
Highstock中文API文档详细阐述了如何使用Highcharts库制作交互式图表。Highcharts是一个广泛使用的JavaScript图表库,它可以通过简单的配置和数据输入创建丰富的图表类型。文档包含了Highcharts的结构、API及其各个...