jqPlot图表插件使用说明（一）

最新推荐文章于 2021-03-20 06:34:30 发布
最新推荐文章于 2021-03-20 06:34:30 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： 前端 文章标签： jquery插件 图表 jqplot 统计图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tang19880721/article/details/33725743
版权

最简陋的线形图

第一步：引入必要的CSS、JS文件 
<link rel="stylesheet" type="text/css" href="js/jqPlot/1.0.4/jquery.jqplot.min.css"/>
<!-- excanvas.js用于兼容IE浏览器 -->
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/jqPlot/1.0.4/excanvas.js">
<!-- jQuery库，此处引用自百度api库 -->
<script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
<!-- jqPlot自身支持文件，不带有min的为未压缩版 -->
<script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jqPlot/1.0.4/plugins/jqplot.canvasTextRenderer.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jqPlot/1.0.4/plugins/jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript" charset="utf-8"></script>

第二步：在body中准备要绘制图表的节点 
<!-- 用于绘制图表，id在JS代码中会用到 -->
<div id="chart1" style="width:300px;height:300px;"></div>

第三步：编写JS代码，绘制图表 
$(function(){
    /**
     * 第一个参数为body中div的id值
     * 第二个参数为要绘制的线形图中各拐点的取值
     * */
     var plot = $.jqplot('chart1', [[3,7,9,1,4,6,8,2,5]]);
});

第四步：查看效果

第五步：常见问题

  1. Uncaught ReferenceError: jQuery is not defined【检查是否引入了jQuery库，或者jQuery库是否在其他JS文件之前被引入。】
  1. Uncaught TypeError: Cannot read property 'msie' of undefined【检查jQuery库版本是否为2.X，尝试降低jQuery库版本，但不能低于1.4版本，不能高于1.8版本。】
  1. Uncaught No Data 【检查JS代码，第二个参数是否为二维数组，如果不是，则报此异常】

至此，我们就完成了最简陋的图表绘制。后面我们可以做出更为复杂的图表，但都是基于以上步骤，除JS代码不同外，没有什么区别。故，接下来的重点将放在JS代码上，其它步骤，不做赘述。

配置图表属性

jqPlot提供很多的属性可以设置，通过不同的属性，图表可以展现出各式各样的外观。和其它jQuery插件类似，jqPlot的配置也是采用js的对象作为参数传递。因此，如果我们要给图表添加一些额外的属性，JS代码应该如下： 
var plot = $.jqplot('chart1', [[3,7,9,1,4,6,8,2,5]], {
    // 配置属性代码
});
所有的属性配置都将以键值对的形式出现在{}之间。
图表作为一种常见的数据表现形式，尤其是线形图表，它具有一定的属性对象，包括但不限于以下几种：
  • 标题；
  • 坐标轴，又分为X轴、Y轴；
  • 数据序列；
  • 图例；
  • 背景；
  • 光标，如鼠标经过数据拐点时，提示该点具体数值。
其中以上每一条都可以作为单独的对象，并衍生出更多的属性。以标题为例，标题可以包含文本、字体、颜色、对齐方式等属性。这些对象和属性，都可以作为一个总的配置对象，传递给jqPlot，以便使jqPlot能够更加精准的绘制图表。从最外层来看，第三个配置属性的参数应该是如下结构： 
{
    title:{ // 标题属性
    },
    axesDefaults:{ // 默认坐标轴属性 
    },
    axes:{ // 具体坐标轴属性
    }
    legend:{ // 图例属性
    },
    grid:{ // 背景网格属性 
    },
    seriesDefaults:{// 默认数据序列属性
    },
    series:{ // 具体数据序列属性
    },
    legend:{ // 图例属性
    },
    cursor:{ // 光标属性
    }
}

进而深入到具体属性的配置，以标题为例，结构如下： 
title:{ // 标题属性
    text:'图表标题', // 标题文本
    show:true, // 是否阴影
    fontFamily:'微软雅黑', // 标题字体 
    fontSize:14, // 标题字体大小
    textAlign:'center', // 标题对齐方式
    textColor:'red', // 标题颜色（也可以写作属性color）
    escapeHtml:false // 是否转义HTML字符，值为false时，可以在text属性中使用HTML代码
}

其它如legend、grid、series等也是类似结构，具体可以配置属性列表，可以参考http://www.jqplot.com/docs/files/jqPlotOptions-txt.html。

带有其它设置的图表

有了之前对jqPlot图表的了解，我们就可以绘制出更为复杂些的图表。示例如下： 
$(function(){
    /**
     * 第一个参数为body中div的id值
     * 第二个参数为要绘制的线形图中各拐点的取值
     * */
    var data = [[38, 3, 9, 8, 49, 27, 14, 46, 32, 4,
                 12, 6, 47, 15, 24, 39, 16, 48, 5, 6,
                 6, 43, 42, 2, 29, 37, 21, 28, 40, 17, 3],
                [45, 24, 24, 29, 3, 19, 32, 45, 41, 8,
                 34, 17, 1, 45, 37, 47, 34, 30, 31, 10,
                 29, 17, 5, 23, 41, 49, 25, 34, 4, 13, 49],
                [43, 23, 37, 12, 26, 11, 29, 29, 22, 27,
                 25, 5, 18, 34, 20, 3, 8, 16, 41, 19,
                 9, 5, 16, 30, 13, 44, 22, 29, 5, 23, 13]
               ];
                   
    var plot = $.jqplot('chart1', data, {
        title:{         // 标题属性
            text:'<div class="chart-title">2014年5月广告位投放数量趋势图<div>',         // 标题文本
            show:true,              // 是否阴影
            fontFamily:'微软雅黑',  // 标题字体 
            fontSize:14,            // 标题字体大小
            textAlign:'left',       // 标题对齐方式
            textColor:'#515151',    // 标题颜色（也可以写作属性color）
            escapeHtml:false        // 是否转义HTML字符，值为false时，可以在text属性中使用HTML代码
        },
        axesDefaults:{  // 默认坐标轴属性  
            min:0,
            tickOptions:{
                showMark:false
            }
        },
        axes:{          // 具体坐标轴属性
            xaxis:{
                label:'日期',
                ticks:[[1,'05/01'], [5,'05/05'], [10,'05/10'], [15,'05/15'], [20,'05/20'], [25,'05/25'], [30,'05/30']]
            },
            yaxis: {
                label: '投放数量'
            }
        },
        legend:{        // 图例属性
            show:true
        },
        grid:{          // 背景网格属性 
            borderWidth:1,
            shadow:false
        },
        seriesDefaults:{// 默认数据序列属性
            lineWidth:1,
            markerOptions:{
                show:true
            }
        },
        series:[        // 具体数据序列属性
            {
                color:'#FF6666',
                label:'CPC'
            },{
                color:'#0066CC',
                label:'CPT'
            },{
                color:'#99CC66',
                label:'CPM'
            }
        ],
        highlighter:{
            show:true,
            tooltipAxes:'y',
            useAxesFormatters:false,
            tooltipFormatString:'投放量：%d'
        }
    });
});

因为在配置图表的标题（title）时，使用HTML标签，这个标签用了一个chart-title类的CSS，所以要加入如下CSS代码： 
.chart-title{
    background-color: #999999;
    margin-bottom: 10px;
    line-height: 30px;
    padding-left: 10px;
    background-color: #efefef;
    border-bottom:1px solid #dddddd;
    font-weight: bold;
}
             
#chart1{
    border: 1px solid #dddddd;
}

其它部分代码没有改动，此时在页面中查看图表展示效果，如下：

完整代码

目录结构：

完整代码： 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jqPlot图表Demo</title>
        <link rel="stylesheet" type="text/css" href="js/jqPlot/1.0.4/jquery.jqplot.min.css"/>
        <style type="text/css">
            .chart-title{
                background-color: #999999;
                margin-bottom: 10px;
                line-height: 30px;
                padding-left: 10px;
                background-color: #efefef;
                border-bottom:1px solid #dddddd;
                font-weight: bold;
            }
             
            #chart1{
                border: 1px solid #dddddd;
            }
        </style>
        <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/jqPlot/1.0.4/excanvas.js"></script><![endif]-->
        <script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
        <script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jqPlot/1.0.4/plugins/jqplot.canvasTextRenderer.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jqPlot/1.0.4/plugins/jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jqPlot/1.0.4/plugins/jqplot.cursor.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jqPlot/1.0.4/plugins/jqplot.highlighter.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            $(function(){
                /**
                 * 第一个参数为body中div的id值
                 * 第二个参数为要绘制的线形图中各拐点的取值
                 * */
                var data = [[38, 3, 9, 8, 49, 27, 14, 46, 32, 4,
                             12, 6, 47, 15, 24, 39, 16, 48, 5, 6,
                             6, 43, 42, 2, 29, 37, 21, 28, 40, 17, 3],
                            [45, 24, 24, 29, 3, 19, 32, 45, 41, 8,
                             34, 17, 1, 45, 37, 47, 34, 30, 31, 10,
                             29, 17, 5, 23, 41, 49, 25, 34, 4, 13, 49],
                            [43, 23, 37, 12, 26, 11, 29, 29, 22, 27,
                             25, 5, 18, 34, 20, 3, 8, 16, 41, 19,
                             9, 5, 16, 30, 13, 44, 22, 29, 5, 23, 13]
                            ]
                 
                var plot = $.jqplot('chart1', data, {
                    title:{         // 标题属性
                        text:'<div class="chart-title">2014年5月广告位投放数量趋势图<div>',           // 标题文本
                        show:true,              // 是否阴影
                        fontFamily:'微软雅黑',  // 标题字体 
                        fontSize:14,            // 标题字体大小
                        textAlign:'left',       // 标题对齐方式
                        textColor:'#515151',    // 标题颜色（也可以写作属性color）
                        escapeHtml:false        // 是否转义HTML字符，值为false时，可以在text属性中使用HTML代码
                    },
                    axesDefaults:{  // 默认坐标轴属性  
                        min:0,
                        tickOptions:{
                            showMark:false
                        }
                    },
                    axes:{          // 具体坐标轴属性
                        xaxis:{
                            label:'日期',
                            ticks:[[1,'05/01'], [5,'05/05'], [10,'05/10'], [15,'05/15'], [20,'05/20'], [25,'05/25'], [30,'05/30']]
                        },
                        yaxis: {
                            label: '投放数量'
                        }
                    },
                    legend:{        // 图例属性
                        show:true
                    },
                    grid:{          // 背景网格属性 
                        borderWidth:1,
                        shadow:false
                    },
                    seriesDefaults:{// 默认数据序列属性
                        lineWidth:1,
                        markerOptions:{
                            show:true
                        }
                    },
                    series:[        // 具体数据序列属性
                        {
                            color:'#FF6666',
                            label:'CPC'
                        },{
                            color:'#0066CC',
                            label:'CPT'
                        },{
                            color:'#99CC66',
                            label:'CPM'
                        }
                    ],
                    highlighter:{
                        show:true,
                        tooltipAxes:'y',
                        useAxesFormatters:false,
                        tooltipFormatString:'投放量：%d'
                    }
                });
            });
        </script>
    </head>
    <body>
        <!-- 用于绘制图表，id在JS代码中会用到 -->
        <div id="chart1" style="width:800px;height:400px;"></div>
    </body>
</html>
jqPlot图表插件使用说明（三）
码农的世界
06-26 2395
简单交互 在之前的学习中，我们已经可以绘制各种类型的图表，也可以给图表添加不同的组件，如标题、图例等等。但这些图表只能用于展示数据，一旦希望对图表有所操作——比如查看数据明细——就显得束手无策了。其实jqPlot是提供了图表事件交互功能的，且实现起来，也相当的简单。接下来我们要做的就是，学习如果监听图表事件，并对事件进行处理。 在jqPlot的源码中，我们能够看到这样的代码片段：
jqplot.demo
11-01
简单易懂的制表插件，功能强大，简单易懂，基于jQuery的一款插件
jqplot js图表绘制工具
Delion
07-11 1800
个非常强大的图表工具，曲线，柱状，饼图，应该有尽有，更要命的是，调用方便~~  官网：http://www.jqplot.com/  jqPlot整的来说有三个地方需要配置。格式如：  $.jqplot(‘target', data, options);target：要显示的位置。data：显示的数据。options：其它配置  seriesColors: [ "#4bb2c5", "#c
Jqplot的应用
01-18 9967
在自己做一个MVC的小项目时，需要用图表来显示统计信息，看了很多JS图表，有HighCharts、JqPlot、JsChart，其中HighCharts和JsChart只能用作个人使用、为了以后项目中能使用，在这用了JqPlot（个人和商业都免费），先学习下。         关于JqPlot的下载可以去：www.jqplot.com/        关于JqPlot的详细中文配置参考：h
jqPlot图表插件使用说明（二）
码农的世界
06-24 3119
柱状图 在jqPlot图表插件使用说明（一）中，我们已经可以通过jqPlot绘制出比较简单的线形图。通过查看源代码，我们也可以看出，线形图是jqPlot默认的图表类型：
数据可视化(5)--jqplot经典实例
weixin_33915554的博客
12-13 274
本来想把实例也写到上篇博客里，最后发现太长了，拆成两篇博客了。 实例来源于官方文档：http://www.jqplot.com/tests/ 这篇博客主要是翻译了官方文档关于经典实例的解说，并在相应代码中添加注释。 写到后面的时候，感觉有点心不在焉，如果有错误，或者看不懂的，欢迎留言。 Line charts, scatter plots and series options（线图，散点图...
jqplot图表插件
04-23
**jqPlot图表插件详解** jqPlot是一款基于JavaScript的开源图表绘制库，它允许开发者在网页上创建出各种复杂的图表，如折线图、柱状图、饼图等。这款插件以其丰富的自定义选项、良好的性能以及对移动设备的支持而受...
jqPlot图表插件使用教程：自定义图表样式技巧
3. 初始化jqPlot图表，这通常在JavaScript中完成，并指定数据、配置选项和其他自定义设置。 jqPlot的配置选项非常丰富，允许开发者精确控制图表的每一个细节，包括颜色方案、图例位置、鼠标悬停提示（tooltips）...
jQuery插件 Jqplot图表实例
10-22
### jQuery插件 Jqplot图表实例知识点解析 #### 一、概述 Jqplot 是一个基于 jQuery 的图表绘制插件，它可以用来创建多种类型的图表，包括折线图、柱状图、饼图等。该插件支持丰富的配置选项，允许用户自定义图表...
jqplot图表插件的使用方法与示例
jqplot图表插件为前端开发者提供了一种快速简便的方法来制作直观的数据图表，进而提升网页的交互性和用户体验。通过学习和使用jqplot，开发者可以轻松地将复杂的数据转化为易于理解的图表形式。无论是快速原型设计...
jqplot 图表插件
06-25
jqPlot 作为一款优秀的图表插件，它的强大功能和灵活性使其成为 Web 开发者进行数据可视化时的得力助手。通过深入理解和实践，开发者可以构建出既美观又实用的图表应用，满足各种业务场景的需求。
fusionChars,highchars,jqplot绘图插件Demo
06-19
导入即可使用的绘图插件DEMO，对于每个插件都有详细的使用说明
jplot:更快地绘制大型时间序列。-matlab开发
05-30
此函数是 matlab 绘图函数的最小包装器，在低缩放系数下自动下采样，在高缩放系数下进行裁剪以实现更快的缩放和平移。 它适用于子图，可以与相同轴上的任何类型的法线图结合使用。 可以通过调整 MAXPOINTS 的值来改变下采样的数量。 请注意，jplot 使用绘制线的 'tag' 和 'userdata' 属性。
JPlot-开源
04-27
JPlot是一种多功能数据绘图程序，可用作（科学）软件的图形前端。 JPlot还可以作为具有完整且易于使用的图形用户界面（GUI）的独立应用程序使用。
jplot：iTerm2 expvarJSON监视工具
01-30
jplot Jplot跟踪类似expvar（JSON）的指标，并将其随时间的变化绘制到iTerm2终端中。 上面的捕获是jplot监视Go服务的 ： jplot --url http://:8080/debug/vars \ memstats.HeapSys+memstats.HeapAlloc+memstats.HeapIdle+marker,counter:memstats.NumGC \ counter:memstats.TotalAlloc \ memstats.HeapObjects \ memstats.StackSys+memstats.StackInuse 默认情况下，jplot使用终端的完整大小，但是可以将渲染限制为几行： 安装 使用： brew install rs/tap/jplot 来自来源： go get -u github.com/rs/jplot 该工具仅适用于 。 用法 给出以下JSON输出： { "mem": { "Heap": 1234, "Sys": 4321,
jqplot插件的简单使用
u012055761的专栏
09-18 629
最近项目中需要使用jqplot做一些统计图，
Jquery插件jqplot使用小记
实习工作小记
05-17 2652
<br />      最近开发web ui使用的Jquery插件是Jqplot。<br />      Jqplot资料的首选资源是www.jqplot.com。在example和doc里面有各种用的例子和资料。个人推荐从download上下载最近的打包。这里面有很多现成的代码可以供你研究和修改。<br />      在CSDN上也有很多同志使用和发布了许多关于jqplot的配置信息。个人认为比较实用的是：http://blog.csdn.net/gaoyusi4964238/archive/2009/
jqplot demo
千年老妖怪
12-04 153
[code="java"] jqplot $(document).ready(function(){ $.jqplot('chartdiv',[[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],{ ...
jqplot php,jquery jqPlot API 中文使用教程(非常强大的图表工具)_jquery
weixin_42591908的博客
03-20 214
jqPlot是一个非常强大的图表工具，曲线，柱状，饼图，应该有尽有，更要命的是，调用方便~~官网：http://www.jqplot.com/这里贡献上中文教程，基本上所有的api都很齐全，供有需要的童鞋们瞧瞧，更重要的是作为自己滴收藏~~哦耶耶~jqPlot整的来说有三个地方需要配置。格式如：$.jqplot(‘target', data, options);target：要显示的位置。data...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值