jQuery 图表插件 jqChart 使用

news/2025/2/25 13:40:50

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

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



转载于:https://my.oschina.net/leixiaohua1020/blog/301976


http://www.niftyadmin.cn/n/711897.html

相关文章

Java多线程和并发

进程和线程的区别 进程是资源分配的最小单位&#xff0c;线程是CPU调度的最小单位所有与进程相关的资源&#xff0c;都被记录在PCB中进程是抢占处理机的调度单位&#xff0c;线程属于某个进程&#xff0c;共享其资源线程只由堆栈寄存器&#xff0c;程序计数器和TCB组成区别&…

mysql 安装与环境配置_MYSQL的安装与环境配置

1.下载好了安装包后&#xff0c;解压。2.创建一个同级空目录mysqlData&#xff0c;再进入mysql8.0.15打开my.ini配置文件。3.根据路径配置my.ini4.输入cmd&#xff0c;打开命令提示符&#xff0c;之后进入安装mysql目录的bin目录&#xff0c;初始化数据库&#xff0c;输入命令m…

SDN持续火热!未来5年复合增长率超40%

近两年&#xff0c;软件定义网络SDN已经成为网络世界的流行语!它的出现打破了传统网络架构的“专有”属性——分离数据层和控制层&#xff0c;同时具备“设备资源虚拟化”和“硬件及软件可编程”等特性&#xff0c;从而可构建一个更加灵活、易扩展、安全、管理更简便的网络。 S…

Tomcat突然启动不了

今天学习cookie的时候&#xff0c;建好了一个动态Web工程后&#xff0c;重启Tomcat突然启动不了。然后在网上寻找答案也没找到我的这种问题&#xff0c;后来只好直接寻找。最后发现了造成这个问题的原因&#xff0c;现将这个原因记录在这里&#xff0c;避免以后遇到相同的问题忘…

怎样查询网络上有几台计算机,教你如何查询自己电脑的ip地址

大家都知道&#xff0c;每台联网的电脑或移动设备&#xff0c;都是有自己的ip地址的。我们在处理某些事的时候&#xff0c;有时候是需要知道自己电脑的ip地址&#xff0c;但是很多朋友还不知道如何查询自己电脑的ip地址。下面小编给大家分享几个&#xff0c;查询本机电脑ip地址…

linux more 下一页_Linux中more和less命令用法

一、more命令more功能类似 cat &#xff0c;cat命令是整个文件的内容从上到下显示在屏幕上。 more会以一页一页的显示方便使用者逐页阅读&#xff0c;而最基本的指令就是按空白键(space)就往下一页显示&#xff0c;按 b 键就会往回(back)一页显示&#xff0c;而且还有搜寻字串的…

【新智元专访】Bengio 团队获一亿美元政府资助,用于深度学习知识革命

【人物介绍】Yoshua Bengio 从 20 世纪 80 年代开始研究神经网络。他 1991 年在麦吉尔大学获得博士学位&#xff0c;此后在麻省理工学院跟从 Michael Jordan 做博士后研究&#xff0c;之后在贝尔实验室与 Yann LeCun、Patrice Simard、Lon Bottou、Vladimir Vapnik 等人一起工作…

微型计算机指令按其操作功能不同分为,.计算机单选题.doc

计算机单选题1946年问世的首台电子数字计算机ENIAC至现代的微型机均属于VonNeumann(冯.诺伊曼)型体系结构。在冯。诺伊曼型体系结构的计算机中引进两个重要的概念&#xff0c;它们是采用二进制和存储程序的概念。1MB的存储空间能存储1024*512个汉字国标(GB2312—80)码.286微型计…