文档章节

jQuery 图表插件 jqChart 使用

雷霄骅
 雷霄骅
发布于 2014/08/16 13:48
字数 381
阅读 174
收藏 0

jQuery 图表插件 jqChart显示效果效果非常好。支持以下几种图表:

Area

Bar

Bubble

Column

Financial Chart - Candlestick

Financial Chart - Stock

Line

Pie

Radar Area

Radar Line

Radar Spline Area

Radar Spline

Scatter

Spline Area

Spline

Stacked Column

Stacked Bar

可见支持的种类非常之多。在这里我们使用一下Radar Area Chart(雷达图)。使用方式如下:

引入必要的文件,注意jQuery的js文件要放在最前面,版本不一定是1.5.1,比这个版本高也行。实际中根据示例代码修改相应的地方就行。

<link rel="stylesheet" type="text/css" href="../css/jquery.jqChart.css" />
    <link rel="stylesheet" type="text/css" href="../css/jquery.jqRangeSlider.css" />
    <link rel="stylesheet" type="text/css" href="../themes/smoothness/jquery-ui-1.8.21.css" />
    <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="../js/jquery.mousewheel.js" type="text/javascript"></script>
    <script src="../js/jquery.jqChart.min.js" type="text/javascript"></script>
    <script src="../js/jquery.jqRangeSlider.min.js" type="text/javascript"></script>
    <!--[if IE]><script lang="javascript" type="text/javascript" src="../js/excanvas.js"></script><![endif]-->
    
    <script lang="javascript" type="text/javascript">
        $(document).ready(function () {

            var background = {
                type: 'linearGradient',
                x0: 0,
                y0: 0,
                x1: 0,
                y1: 1,
                colorStops: [{ offset: 0, color: '#d2e6c9' },
                             { offset: 1, color: 'white'}]
            };

            $('#jqChart').jqChart({
                title: { text: 'Radar Area Chart' },
                border: { strokeStyle: '#6ba851' },
                background: background,
                axes: [
                        {
                            type: 'categoryAngle',
                            categories: ['France', 'Canada', 'Germany', 'USA', 'Italy', 'Spain', 'Russia', 'Sweden', 'Japan']
                        },
                        {
                            type: 'linearRadius',
                            renderStyle: 'polygon',
							lineWidth: '5',
							minimum : 0,
							maximum : 100,
							interval : 20,

							
                            majorTickMarks: { visible: true }
                        }
                      ],
                series: [
                            {
                                title : 'Series 1',
                                type: 'radarArea',
                                data: [65.62, 75.54, 60.45, 34.73, 85.42, 55.9, 63.6, 55.1, 77.2],
                                fillStyle: 'rgba(65,140,240,0.75)'
                            },
                            {
                                title: 'Series 2',
                                type: 'radarArea',
                                data: [76.45, 23.78, 86.45, 30.76, 23.79, 35.67, 89.56, 67.45, 38.98],
                                fillStyle: 'rgba(252,180,65,0.75)'
                            }
                        ]
            });
        });
    </script>


需要显示图表的地方,只需使用一个<div>即可:

<div id="jqChart" style="width: 500px; height: 300px;">
        </div>


显示结果如图所示:


 jqChart官方网站:http://www.jqchart.com/Default.aspx

jqChart下载:http://download.csdn.net/detail/leixiaohua1020/6377505



本文转载自:http://blog.csdn.net/leixiaohua1020/article/details/12650055

雷霄骅
粉丝 210
博文 419
码字总数 2129
作品 4
朝阳
程序员
私信 提问
jQchart的网友评论

jQchart 是一个jQuery的插件,用来绘制图表的。支持各种形状的图表。 示例代码:

红薯
2009/12/11
1K
12
用 jQchart 制作图表的一个最简单的例子

马上一个项目要用到 jQuery 直接生成图表,今天做了个试验使用 jQchart 来生成图表,下面是图表的效果: 下面是详细的代码: 在线演示:http://www.oschina.net/jqchart.vm...

红薯
2009/02/08
9.5K
9
老大出问题了

http://www.oschina.net/p/jqchart 我点击的是下载,但是打开的只是一些代码。 //jquery.jQchart // //@charset utf-8 //(Public Domain) //http://jsgt.org/lib/jquery/plugin/jqchart/nig......

绝版小西瓜
2011/02/23
836
8
jQuery制作图表之一--线图(使用插件jquery.jqchart.js)的使用总结之一

问题描述: 在这个跨入web2.0的时代,也别说2.0的时代。就跨入现在这个铺天盖地的web系统的年头,什么都流行web化。田我做的是OA系统,大把大 把的系统等着二次开发成web形式。这里有Delphi的...

红薯
2009/02/08
6.9K
1
jQuery制作图表之一--线图(使用插件jquery.jqchart.js)的使用总结之二

书接上回...... 我们进一步的修改 其实除了写在config里,还可以写在html代码里。不过这里要注意,很多标签都必须有严格命名规范。 用一张图来说明: 严格按照这个图上的命名规范命名标签,就...

红薯
2009/02/08
5.2K
3

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins World 贡献者峰会及专家答疑展位

本文首发于:Jenkins 中文社区 原文链接 作者:Marky Jackson 译者:shunw Jenkins World 贡献者峰会及专家答疑展位 本文为 Jenkins World 贡献者峰会活动期间的记录 Jenkins 15周岁啦!Jen...

Jenkins中文社区
19分钟前
6
0
杂谈:面向微服务的体系结构评审中需要问的三个问题

面向微服务的体系结构如今风靡全球。这是因为更快的部署节奏和更低的成本是面向微服务的体系结构的基本承诺。 然而,对于大多数试水的公司来说,开发活动更多的是将现有的单块应用程序转换为...

liululee
34分钟前
6
0
OSChina 周二乱弹 —— 我等饭呢,你是不是来错食堂了?

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @ 自行车丢了:给主编推荐首歌 《クリスマスの夜》- 岡村孝子 手机党少年们想听歌,请使劲儿戳(这里) @烽火燎原 :国庆快来,我需要长假! ...

小小编辑
今天
329
8
玩转 Springboot 2 之热部署(DevTools)

Devtools 介绍 SpringBoot 提供了热部署的功能,那啥是热部署累?SpringBoot官方是这样说的:只要类路径上的文件发生更改,就会自动重新启动应用程序。在IDE中工作时,这可能是一个有用的功能...

桌前明月
今天
5
0
CSS--列表

一、列表标识项 list-style-type none:去掉标识项 disc:默认实心圆 circle:空心圆 squire:矩形 二、列表项图片 list-style-img: 取值:url(路径) 三、列表项位置 list-style-position:...

wytao1995
今天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部