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

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
分享到：
| 一个职位让我想到的
评论
发表评论

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

相关推荐

    Jquery图表JQuery_Chart

    JQuery_Chart是一款基于jQuery库开发的图表插件，它为网页开发者提供了丰富的图表类型，包括线图、区域图、饼图和柱状图等，极大地简化了在Web页面上展示数据和统计信息的过程。这款插件易于使用，且功能强大，能够...

    jquery.orgchart.js

    《jQuery OrgChart.js：构建灵活组织结构图的利器》 OrgChart.js 是一款基于 jQuery 的高效、可定制化的组织结构图插件。它允许开发者轻松地在网页上展示层次分明的组织架构，如公司部门、团队成员关系或者任何具有...

    jQuery组织结构图表插件OrgChart.zip

    《jQuery组织结构图表插件OrgChart深度解析与应用》 jQuery组织结构图表插件OrgChart是一款基于jQuery的高效、易用的图表展示工具，尤其适用于构建企业或项目的组织架构图。该插件以其灵活的配置选项和丰富的自定义...

    Chart Jquery

    "Chart Jquery"是一个关于使用Jquery库进行数据可视化，特别是图表绘制的主题。Jquery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。在数据可视化的领域，Jquery与Highcharts和...

    前端项目-jquery-orgchart.zip

    【前端项目-jquery-orgchart.zip】是一个前端开发的资源包，主要包含了一个基于jQuery的插件，用于构建分层组织结构图。这个插件能够帮助开发者高效地将HTML中的嵌套无序列表转换为视觉上清晰、易于理解的组织结构图...

    jQuery chart

    jQuery本身是一个广泛使用的JavaScript库，简化了DOM操作、事件处理和动画效果，而jQuery图表库则扩展了这些功能，提供了丰富的图形展示选项。 **jQuery图表库的特点** 1. **易用性**：jQuery图表库通常具有简单的...

    jQuery OrgChart 绘制组织结构图插件.zip

    jQuery OrgChart是一款基于jQuery库的插件，专用于绘制组织结构图。这个插件使得开发者能够轻松地在网页上创建直观、动态的组织结构图表，适用于企业内部展示员工关系、项目团队分配或者其他需要层次结构表示的数据...

    JQuery OrgChart

    **jQuery OrgChart** jQuery OrgChart 是一个基于 jQuery 的开源库，用于创建组织结构图。它提供了灵活、可自定义的选项来展示企业、项目团队或任何具有层次结构的数据。通过这个库，开发者可以轻松地在网页上展示...

    jgchars jquery chart

    jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和Ajax交互等任务。将jgchars与jQuery结合，可以利用jQuery的强大功能来优化图表的初始化、更新和交互。例如，通过jQuery选择器快速定位图表容器，...

    jQuery+css 流程图插件

    2. **JavaScript文件**：包含流程图插件的核心逻辑，如`flowchart.js`，可能包括初始化流程图、添加节点、处理事件等功能。 3. **HTML文件**：展示流程图的页面模板，可能有示例代码展示如何使用插件。 4. **图片或...

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

    JQUERY作为一个轻量级的JavaScript库，提供了丰富的DOM操作和事件处理功能，使得我们可以方便地对图表进行动态更新。例如，我们可以实时刷新图表数据，根据用户的选择显示不同维度的数据，或者添加自定义的交互行为...

    树形图jQuery插件jOrgChart

    2. **jQuery**: jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。`jOrgChart`利用jQuery的强大功能，实现了在DOM中创建和操作树形图。 3. **jOrgChart插件**: `...

    jQuery实现公司组织结构图

    7. **插件利用**：虽然可以直接用jQuery编写组织结构图，但市场上已有许多现成的jQuery插件，如`orgchart.js`，它们提供了更丰富的功能和自定义选项。使用这些插件可以快速实现复杂的组织结构图，减少开发时间和工作...

    jquerylinechart用于创建曲线图的JQuery插件

    1. **jQuery库**：jQuery是一个轻量级的JavaScript库，它使得JavaScript编程变得更加简单，提供了丰富的DOM操作、事件处理、动画效果等功能。 2. **曲线图**：曲线图是一种用连续的折线连接一系列数据点的图表，常...

    jQuery实现的功能无比强大的google图表效果

    在IT领域，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画以及Ajax交互等任务。本文将深入探讨如何利用jQuery与Google图表API结合，创建出功能强大的数据可视化效果。 首先，让我们...

    JQuery实现流程图效果

    在IT行业中，jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本教程将深入探讨如何利用jQuery来创建流程图效果，这对于网页交互和数据展示至关重要。 首先，流程图是一...

    jquery+easyUI+ajax+dom+highchart

    jQuery 的API设计使得JavaScript编程变得更加简单，它封装了许多常用的JavaScript函数，使得开发者可以更方便地操作DOM、处理事件、进行AJAX请求。 **EasyUI** EasyUI 是基于jQuery的一个前端开发框架，它提供了...

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