`
ynial
  • 浏览: 225766 次
  • 来自: ...
社区版块
存档分类
最新评论

jquery chart处理

jQueryjfreechartJavaScriptXHTMLHTML 
阅读更多
各种语言都有很多 关于chart的api、例如java的jfreechart 等。。。
由于单位的业务需要、需要在前台使用jquery生成相关的图标
所以最近找到了一个jgcharts.pack.js来处理业务。
美中不足的是 jgcharts 不支持 ie6 [ie7 ie8 还没有测试]
虚拟需求1：分析年龄段在 20-30 40-50 50-60 年龄范围的客户群体饼形图。

虚拟数据位 
20-30 7400人
30-40 5000人
40-50 3000人
50-60 1200人

具体代码实现 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <script src="../../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
	<script src="../../jgcharts.pack.js" type="text/javascript"></script>
	<script>
			var api = new jGCharts.Api();
			jQuery('<img>')
			.attr('src', api.make({
				axis_labels : ['20岁-30岁','30岁-40岁','40岁-50岁','50岁-60岁'],
				data : [[7400], [5000], [3000], [1200]],
				colors : ['f8b038'],
				type : 'p3',//default bvg
				size : '400x200',
				title : '客户群体年龄范围数据分析'
			})).appendTo("#bar1");
		});
	</script>
</head>    
<body>
<div id="bar1"></div>
</body>
</html>

  • 大小: 28.8 KB
分享到：
| 一个职位让我想到的
评论
发表评论

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

相关推荐

    open-flash-chart例子（用了点JQUERY处理了下，好可视化）

    做统计图不错,flash动画效果，用配置文件的形式存在。使用很方便

    Pretty-Doughtnut:使用 Chart.js 和 jQuery 制作漂亮的甜甜圈图

    Chart.js 和 jQuery 的漂亮甜甜圈图表。 一个更漂亮的圆环图的快速和肮脏的实现，作为一个百分比/进度表......风格你认为合适，下面的选项对象中提供了一些选项。 ＃＃选项 doughnutWidget . options = { ...

    使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法

    eval函数可以把一些处理过程序代码进行解析从而达到可以执行的一个状态，查了很多帖子，jqchart插件做折线图时，处理返回数据时全都是eval，但我怎么也弄不出来，后来...script type="text/javascript" src="jquery.1

    人力管理系统北风网实战项目最终源码

    同时会涉及到jQuery Ajax、XML、jQuery插件 、Dtree递归树\WebChart高级图表统计图\Excel导出复杂报表打印\CodeSmith\图片水印\防盗链\WebService\面向对象的建模、分析、设计和实施方法，掌握第三方控件技术和报表...

    mbostock-d3和示例页面

    可以帮助你将数据绑定到HTML文档中，与Google Chart Tools不同的是，D3提供了大量的数据可视化模板，并且可以自定义，你也可以从头...D3能够处理多种数据格式，包括XML、CSV和JSON等，并包含了简单遍历数据集的功能。

    MF00492-ASP.NET企业人力资源管理.zip

    四、技术特点：EasyUI,JQuery，Lodop打印控件，微软Chart图表控件,统一权限管理系统（aspx页面完成显示 ashx处理所有请求） 1、采用主流框架：jQuery+EasyUI。（jQuery EasyUI是一组基于jQuery的UI插件集合，而...

    基于ASP.NET三层架构技术的HR人力资源管理系统项目

    同时会涉及到jQuery Ajax、XML、jQuery插件 、Dtree递归树\WebChart高级图表统计图\Excel导出复杂报表打印\CodeSmith\图片水印\防盗链\WebService\面向对象的建模、分析、设计和实施方法，掌握第三方控件技术和报表...

    google-chart-scatter:这是一个演示如何使用Google可视化库进行基本绘图的演示

    谷歌图表散点图 这是一个有关如何使用Google可视化库进行基本绘图的演示。 使用者介面 该webapp包含两个主要... custom-logic.js-处理基本的前端逻辑 概念证明使用JQuery实现丰富的交互界面。 使用Google可视化库

    jQWidgets：Angular，Vue，React，Web组件，Blazor，Javascript，jQuery和ASP .NET Framework，

    框架核心提供了基本功能，例如对小部件扩展和继承的支持，小部件设置，内部事件处理和路由，属性更改通知，设备和浏览器兼容性检测与调整。 强调 具有完整的用户界面小部件。 适用于PC，触摸和移动设备。 丰富的...

    PrimeUI Widgets

    PrimeUI使用JSON数据，并使用jQuery UI的WidgetFactory API提供Widget控件，作为jQuery插件。其代码开源，采用Apache许可证。 PrimeUI最终发布的控件列表包括： - InputText - InputTextarea - SelectOneMenu - ...

    Feedback-System:这是一个基于Web的项目，主要针对大学中任何部门的反馈分析而开发

    反馈系统这是一个基于Web的项目，主要用于学院... 对于前端，我使用HTML，CSS，Bootstrap，并且对于调用Web服务，我使用JQuery，也用于处理Web服务中的返回数据，我使用Javascript。 为了生成图形报告，我使用ChartJS。

    Reading--notes

    错误处理与调试 图片 HTML Element＆Chart.js的文档 本地存储 CSS转换 Google学习了如何建立完美的团队 代码301-中间软件开发： 日 班级 响应式网页设计 对编程和jQuery MUSTACHE和FLEXBOX CSS网格花园 ...

    快速解决FusionCharts联动的中文乱码问题

    问题内容: 使用fusioncharts 时,也许你想在如demo.html 这个页面点击Chart的一...如果你Ajax请求的返回内容乱码,就直接使用Jquery.ajax. 代码如下:function mychartclick(month) { var id =1;  var d = new Date(); 

    Attendance-System:这个基于Web的应用程序主要用于大学中任何部门的出勤监控和休假管理

    考勤系统 这个基于Web的应用程序主要用于大学... 对于前端，我使用HTML，CSS，Bootstrap，并且对于调用Web服务，我使用JQuery，也用于处理Web服务中的返回数据，我使用Javascript。 为了生成图形报告，我使用ChartJS。

    Showroom 簡易データ処理班-crx插件

    * JEXCEL（简单电子表格）和它所需的库* jquery.*时刻.JS.* chart.js（创建图表）* filesver.js.V0.0.1至V0.0.2更改*即使在没有排序的情况下也正确地获取数据*表格和表添加粉丝的数量*在交货期间收购数据*固定在Pano...

    node_web_scraper:用node.js编写的网络抓取程序

    该项目旨在使用来收集过去几年中的单词出现数据，并对其进行图形化处理以展示 ·· 目录 入门 先决条件 安装 用法 路线图 贡献 执照 接触 关于该项目 建于 AWS Elastic Beanstalk Nodejs的 Axios Chart.js 切里...

    Highcharts-Gantt-8.1.2.zip

    结合 jQuery 的 ajax 功能，可以做到实时刷新数据、用户手动修改数据等功能，结合事件处理，可以做到各种交互功能。 范围选择器 在处理大数据集时，我们可能需要查看不同时间范围的数据。Highstock 提供了范围选择...

    Highcharts-Stock-8.1.2.zip

    结合 jQuery 的 ajax 功能，可以做到实时刷新数据、用户手动修改数据等功能，结合事件处理，可以做到各种交互功能。 范围选择器 在处理大数据集时，我们可能需要查看不同时间范围的数据。Highstock 提供了范围选择...

    C#基类库大全下载--苏飞版

    这里面实现了很多的帮助方法，比如正则验证，加密，解密，MD5加密，字符串的处理等操作。 2.最新的 PageValidate 类 主要是实现了验证，是否为空，是否为数字等。 3.JavascriptHelp 帮助输出简单的JS代码 4.最新...

    Highcharts-8.1.2.zip

    结合 jQuery 的 ajax 功能，可以做到实时刷新数据、用户手动修改数据等功能，结合事件处理，可以做到各种交互功能。 支持多坐标轴 多个数据进行对比这是非常常见的需求，Highcharts 可以让你为每个类型的数据添加...

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