jqPlot圖表插件使用說明(一)

最簡陋的線形圖

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

<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中準備要繪製圖表的節點css

<!-- 用於繪製圖表,id在JS代碼中會用到 -->
<div id="chart1" style="width:300px;height:300px;"></div>


第三步:編寫JS代碼,繪製圖表html

$(function(){
    /**
     * 第一個參數爲body中div的id值
     * 第二個參數爲要繪製的線形圖中各拐點的取值
     * */
     var plot = $.jqplot('chart1', [[3,7,9,1,4,6,8,2,5]]);
});


第四步:查看效果

java

第五步:常見問題jquery

  1. Uncaught ReferenceError: jQuery is not defined【檢查是否引入了jQuery庫,或者jQuery庫是否在其餘JS文件以前被引入。】canvas

  1. Uncaught TypeError: Cannot read property 'msie' of undefined【檢查jQuery庫版本是否爲2.X,嘗試下降jQuery庫版本,但不能低於1.4版本,不能高於1.8版本。】api

  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>
相關文章
相關標籤/搜索