文档章节

jQuery 图表插件 jqChart 使用

abcijkxyz
 abcijkxyz
发布于 2016/08/06 11:54
字数 381
阅读 27
收藏 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

abcijkxyz
粉丝 63
博文 6196
码字总数 1876
作品 0
深圳
项目经理
私信 提问

暂无文章

高并发场景下的缓存有哪些常见的问题?

一、缓存一致性问题 当数据时效性要求很高时,需要保证缓存中的数据与数据库中的保持一致,而且需要保证缓存节点和副本中的数据也保持一致,不能出现差异现象。 这就比较依赖缓存的过期和更新...

别打我会飞
19分钟前
1
0
List list = new ArrayList()为何父类引用指向子类对象(多态)

态:要有继承,方法的重写,父类引用指向子类对象 疑问一:父类引用指向子类对象 与指向父类对象 Animal cat = new Cat(); //向上转型。 父类引用指向子类对象,该引用不能再访问子类新增加的...

architect刘源源
20分钟前
0
0
分而治之-快速排序

快速排序的思想: 快速排序首先在数组中确定1个枢纽项(比如数组中的第一个元素),将大于该枢纽项的元素放到右侧,小于该枢纽项的元素放到左侧,这样枢纽项将数组划分成两部分。接着继续对划...

万山红遍
今天
4
0
Qt编写自定义控件9-导航按钮控件

前言 导航按钮控件,主要用于各种漂亮精美的导航条,我们经常在web中看到导航条都非常精美,都是html+css+js实现的,还自带动画过度效果,Qt提供的qss其实也是无敌的,支持基本上所有的CSS2属...

飞扬青云
今天
3
0
Python开发工具:pyJasper

原文:https://www.oschina.net/p/pyjasper 前言 pyJasper是 JasperReports 网络服务器的 Python 客户端。 pyJasper 是一组 Python 基础工具,可以用来处理 JasperReports 报表 。因为 Jasper...

A_裙232550246
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部