图widget--jqplot样品和参数描述的简单演示-阿里云开发者社区

最简单的线图

第一步：引入必要的CSS、JS文件

 
    [html] 
    view plain
    copy 
   
<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中准备要绘制图表的节点

 
    [html] 
    view plain
    copy 
   
<!-- 用于绘制图表，id在JS代码中会用到 -->  
<div id="chart1" style="width:300px;height:300px;"></div>  

第三步：编写JS代码，绘制图表

 
    [javascript] 
    view plain
    copy 
   
$(function(){  
    /** 
     * 第一个參数为body中div的id值 
     * 第二个參数为要绘制的线形图中各拐点的取值 
     * */  
     var plot = $.jqplot('chart1', [[3,7,9,1,4,6,8,2,5]]);  
});  

第四步：查看效果

第五步：常见问题

Uncaught ReferenceError: jQuery is not defined【检查是否引入了jQuery库，或者jQuery库是否在其它JS文件之前被引入。】

Uncaught TypeError: Cannot read property 'msie' of undefined【检查jQuery库版本号是否为2.X，尝试减少jQuery库版本号，但不能低于1.4版本号】

Uncaught No Data 【检查JS代码，第二个參数是否为二维数组，假设不是，则报此异常】

至此，我们就完毕了最简陋的图表绘制。

后面我们能够做出更为复杂的图表，但都是基于以上步骤，除JS代码不同外，没有什么差别。

故，接下来的重点将放在JS代码上，其他步骤，不做赘述。

配置图表属性

jqPlot提供非常多的属性能够设置。通过不同的属性，图表能够展现出各式各样的外观。

和其他jQuery插件类似，jqPlot的配置也是採用js的对象作为參数传递。

因此。假设我们要给图表加入一些额外的属性，JS代码应该例如以下：

 
    [javascript] 
    view plain
    copy 
   
var plot = $.jqplot('chart1', [[3,7,9,1,4,6,8,2,5]], {  
    // 配置属性代码  
});  

全部的属性配置都将以键值对的形式出如今{}之间。

图表作为一种常见的数据表现形式，尤其是线形图表，它具有一定的属性对象。包含但不限于下面几种：

标题；
坐标轴，又分为X轴、Y轴；
数据序列；
图例；
背景；
光标。如鼠标经过数据拐点时，提示该点详细数值。

当中以上每一条都能够作为单独的对象。并衍生出很多其它的属性。以标题为例。标题能够包括文本、字体、颜色、对齐方式等属性。

这些对象和属性，都能够作为一个总的配置对象。传递给jqPlot，以便使jqPlot能够更加精准的绘制图表。

从最外层来看。第三个配置属性的參数应该是例如以下结构：

 
    [javascript] 
    view plain
    copy 
   
{  
    title:{ // 标题属性  
    },  
    axesDefaults:{ // 默认坐标轴属性   
    },  
    axes:{ // 详细坐标轴属性  
    }  
    legend:{ // 图例属性  
    },  
    grid:{ // 背景网格属性   
    },  
    seriesDefaults:{// 默认数据序列属性  
    },  
    series:{ // 详细数据序列属性  
    },  
    legend:{ // 图例属性  
    },  
    cursor:{ // 光标属性  
    }  
}  

进而深入到详细属性的配置，以标题为例。结构例如以下：

 
    [javascript] 
    view plain
    copy 
   
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图表的了解，我们就能够绘制出更为复杂些的图表。示比例如以下：

 
    [javascript] 
    view plain
    copy 
   
$(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代码：

 
    [css] 
    view plain
    copy 
   
.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;  
}  

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

完整代码

文件夹结构：

完整代码：

 
    [html] 
    view plain
    copy 
   
<!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>  