jqPlot圖表插件使用說明（二）

時間  2019-11-20
標籤 jqplot 圖表 插件 使用說明 简体版
原文   原文鏈接

柱狀圖

在jqPlot圖表插件使用說明（一）中，咱們已經能夠經過jqPlot繪製出比較簡單的線形圖。經過查看源代碼，咱們也能夠看出，線形圖是jqPlot默認的圖表類型：
javascript

/**
 * Class: Series
 * An individual data series object.  Cannot be instantiated directly, but created
 * by the Plot oject.  Series properties can be set or overriden by the 
 * options passed in from the user.
 */
function Series(options) {
    // ...其它設置
    // prop: renderer
    // A class of a renderer which will draw the series, 
    // see <$.jqplot.LineRenderer>.
    this.renderer = $.jqplot.LineRenderer;
    // ...其它設置
}


由上面的源碼也能夠看出，jqPlot在設置圖表類型時，用到了renderer屬性。這個屬性是爲圖表的數據序列設置一個渲染器，渲染器決定如何渲染圖表的數據序列。所以，對應於最簡單的線形圖，咱們只須要設置相應的數據序列渲染器，就能夠繪製出最簡單的柱狀圖。完整源碼以下：
css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>最簡單的柱狀圖</title>
        <link rel="stylesheet" type="text/css" href="js/jqPlot/1.0.4/jquery.jqplot.min.css"/>
        <!--[if lt IE 9]>
            <script language="javascript" type="text/javascript" src="js/jqPlot/1.0.4/excanvas.js"></script>
        <![endif]-->
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript"></script>
        <!-- jqplot.barRenderer.min.js爲$.jqplot.BarRenderer渲染器所在JS文件 -->
        <script src="js/jqPlot/1.0.4/plugins/jqplot.barRenderer.min.js" type="text/javascript" ></script>
        <script type="text/javascript" charset="utf-8">
            $(function(){
                $.jqplot('chart1', [[75, 62, 96, 81, 77, 83, 70]], {
                    seriesDefaults:{
                        renderer:$.jqplot.BarRenderer   // 設置數據序列渲染器
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="chart1" style="width: 800px;height: 400px;">
            <!--
                描述：圖表展現區域
            -->
        </div>
    </body>
</html>


來看一下效果圖：
html


配置柱狀圖

由最簡單的線形圖加上一些設置後，可使圖表豐富起來。一樣的，柱狀圖也能夠作一些配置，並且配置的方式與線形圖幾乎沒有差異。再來看一個示例：
java

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>給柱狀圖配置屬性</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"></script>
        <!-- jqplot.barRenderer.min.js爲$.jqplot.BarRenderer渲染器所在JS文件 -->
        <script src="js/jqPlot/1.0.4/plugins/jqplot.barRenderer.min.js" type="text/javascript" ></script>
        <!-- jqplot.categoryAxisRenderer.min.js用於控制X軸標籤的展現渲染 -->
        <script src="js/jqPlot/1.0.4/plugins/jqplot.categoryAxisRenderer.min.js" type="text/javascript" ></script>
        <script src="js/jqPlot/1.0.4/plugins/jqplot.highlighter.min.js" type="text/javascript"></script>
        <script src="js/jqPlot/1.0.4/plugins/jqplot.pointLabels.min.js" type="text/javascript"></script>
        <script type="text/javascript" charset="utf-8">
            $(function(){
                $.jqplot('chart1', [[75, 62, 96, 81], [46, 82, 70, 92], [58, 33, 82, 88]], {
                    title:{         // 標題屬性
                        text:'<div class="chart-title">2013年各季度廣告位投放數量對比圖（非真實數據）<div>',// 標題文本
                        show:true,              // 是否陰影
                        fontFamily:'微軟雅黑',  // 標題字體 
                        fontSize:14,            // 標題字體大小
                        textAlign:'left',       // 標題對齊方式
                        textColor:'#515151',    // 標題顏色（也能夠寫做屬性color）
                        escapeHtml:false        // 是否轉義HTML字符，值爲false時，能夠在text屬性中使用HTML代碼
                    },
                    seriesDefaults:{
                        renderer:$.jqplot.BarRenderer,
                        pointLabels: {  // 顯示數據點，依賴於jqplot.pointLabels.min.js文件
                            show: true
                        },
                        showLabel:true
                    },
                    series:[        // 具體數據序列屬性
                        {
                            color:'#FF6666',
                            label:'CPC'
                        },{
                            color:'#0066CC',
                            label:'CPT'
                        },{
                            color:'#99CC66',
                            label:'CPM'
                        }
                    ],
                    axesDefaults:{  // 默認座標軸屬性  
                        min:0,
                        tickOptions:{
                            showMark:false
                        }
                    },
                    axes:{          // 具體座標軸屬性
                        xaxis:{
                            renderer: $.jqplot.CategoryAxisRenderer,
                            ticks:['第一季度', '第二季度', '第三季度', '第四季度'],
                            label:'季度'
                        },
                        yaxis: {
                            label: '投放數量'
                        }
                    },
                    legend:{        // 圖例屬性
                        show:true,
                        placement: 'outsideGrid' // 設置圖例位於圖表外部
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="chart1" style="width: 800px;height: 400px;">
            <!--
                描述：圖表展現區域
            -->
        </div>
    </body>
</html>


效果以下：
jquery


其它圖表類型

圖表通常用於展現統計數據結果，提高數據可讀性。圖表能夠分爲不少種類型，不一樣的類型展現的效果不同。好比線形圖的數據以一條曲線展現，而柱狀圖的數據則以多個柱形展現。不一樣類型的圖表用途也有區別，線形圖顯然適合展現數據的變化趨勢，柱狀圖則適合用於對數據進行對比，還有餅狀圖適合觀察不一樣選項佔比，等等。經過對線形圖和柱狀圖的學習，咱們能夠聯想到，不一樣類型的圖表，在jqPlot中，最大的差別在於渲染器。經過不一樣的渲染器，咱們就能獲得不一樣的展現效果。固然，它們之間也會有一些不一樣的配置，不過咱們均可以經過文檔或源碼去查看該如何配置一個圖表。canvas


下面是一些比較經常使用的圖表類型及示例代碼。
數組


  • 餅狀圖。餅狀圖對應的數據序列渲染器爲$.jqplot.PieRenderer。與線形圖、柱狀圖不一樣的是，餅狀圖的數據格式是一個三維數組。ide

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>餅狀圖</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="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript"></script>
        <!-- jqplot.pieRenderer.min.js爲餅狀圖渲染器所在JS文件 -->
        <script src="js/jqPlot/1.0.4/plugins/jqplot.pieRenderer.min.js" type="text/javascript" ></script>
        <script src="js/jqPlot/1.0.4/plugins/jqplot.pointLabels.min.js" type="text/javascript"></script>
        <script type="text/javascript" charset="utf-8">
            $(function(){
                $.jqplot('chart1', [[['活多', 31], ['錢少', 92], ['家遠', 50], ['位低', 40], ['權輕', 44], ['任重', 66]]], {
                    title:{         // 標題屬性
                        text:'<div class="chart-title">不想上班的理由<div>',// 標題文本
                        show:true,              // 是否陰影
                        fontFamily:'微軟雅黑',  // 標題字體 
                        fontSize:14,            // 標題字體大小
                        textAlign:'left',       // 標題對齊方式
                        textColor:'#515151',    // 標題顏色（也能夠寫做屬性color）
                        escapeHtml:false        // 是否轉義HTML字符，值爲false時，能夠在text屬性中使用HTML代碼
                    },
                    seriesDefaults:{
                        renderer:$.jqplot.PieRenderer,
                        rendererOptions:{
                            showDataLabels:true
                        },
                        pointLabels: {  // 顯示數據點，依賴於jqplot.pointLabels.min.js文件
                            show: true
                        }
                    },
                    grid:{
                        drawBorder:false,
                        shadow:false,
                        background:'transparent'
                    },
                    legend:{        // 圖例屬性
                        show:true,
                        placement: 'outsideGrid' // 設置圖例位於圖表外部
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="chart1" style="width: 400px;height: 400px;">
            <!--
                描述：圖表展現區域
            -->
        </div>
    </body>
</html>

效果圖： 學習

  • 環形圖。環形圖與餅狀圖的區別只是在於渲染器的不一樣，只須要將與餅狀圖渲染器有關的代碼，修改成環形圖對應的渲染器代碼，就能夠將一個餅狀圖轉變爲環形圖。環形圖渲染器爲$.jqplot.DonutRenderer，下面是完整的環形圖示例代碼：字體

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>環形圖</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="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript"></script>
        <!-- jqplot.donutRenderer.min.js爲環形圖渲染器所在JS文件 -->
        <script src="js/jqPlot/1.0.4/plugins/jqplot.donutRenderer.min.js" type="text/javascript" ></script>
        <script src="js/jqPlot/1.0.4/plugins/jqplot.pointLabels.min.js" type="text/javascript"></script>
        <script type="text/javascript" charset="utf-8">
            $(function(){
                $.jqplot('chart1', [[['活多', 31], ['錢少', 92], ['家遠', 50], ['位低', 40], ['權輕', 44], ['任重', 66]]], {
                    title:{         // 標題屬性
                        text:'<div class="chart-title">不想上班的理由<div>',// 標題文本
                        show:true,              // 是否陰影
                        fontFamily:'微軟雅黑',  // 標題字體 
                        fontSize:14,            // 標題字體大小
                        textAlign:'left',       // 標題對齊方式
                        textColor:'#515151',    // 標題顏色（也能夠寫做屬性color）
                        escapeHtml:false        // 是否轉義HTML字符，值爲false時，能夠在text屬性中使用HTML代碼
                    },
                    seriesDefaults:{
                        renderer:$.jqplot.DonutRenderer,
                        rendererOptions:{
                            showDataLabels:true
                        },
                        pointLabels: {  // 顯示數據點，依賴於jqplot.pointLabels.min.js文件
                            show: true
                        }
                    },
                    grid:{
                        drawBorder:false,
                        shadow:false,
                        background:'transparent'
                    },
                    legend:{        // 圖例屬性
                        show:true,
                        placement: 'outsideGrid' // 設置圖例位於圖表外部
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="chart1" style="width: 400px;height: 400px;">
            <!--
                描述：圖表展現區域
            -->
        </div>
    </body>
</html>

  效果圖：

  • 儀表盤。儀表盤的數據序列只有一個數值，用於指示指針所在位置。儀表盤數據序列的渲染器位於jqplot.meterGaugeRenderer.min.js文件中，爲$.jqplot.MeterGaugeRenderer。來看完整的儀表盤圖表代碼：

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>儀表盤</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="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript"></script>
        <!-- jqplot.meterGaugeRenderer.min.js爲儀表盤渲染器JS文件 -->
        <script src="js/jqPlot/1.0.4/plugins/jqplot.meterGaugeRenderer.min.js" type="text/javascript" ></script>
        <script src="js/jqPlot/1.0.4/plugins/jqplot.pointLabels.min.js" type="text/javascript"></script>
        <script type="text/javascript" charset="utf-8">
            $(function(){
                $.jqplot('chart1', [[75]], {
                    title:{         // 標題屬性
                        text:'<div class="chart-title">當前行駛速度<div>',// 標題文本
                        show:true,              // 是否陰影
                        fontFamily:'微軟雅黑',  // 標題字體 
                        fontSize:14,            // 標題字體大小
                        textAlign:'left',       // 標題對齊方式
                        textColor:'#515151',    // 標題顏色（也能夠寫做屬性color）
                        escapeHtml:false        // 是否轉義HTML字符，值爲false時，能夠在text屬性中使用HTML代碼
                    },
                    seriesDefaults:{
                        renderer: $.jqplot.MeterGaugeRenderer,// 儀表盤渲染器
                        rendererOptions:{
                            showDataLabels:true,
                            min:0,
                            max:120,
                            labelHeightAdjust:-5,
                            ticks: [0, 20, 40, 60, 80, 100, 120],
                            labelPosition:'bottom',
                            intervals:[40, 80, 120],   //取2,3,4這三個刻度值做爲分隔線；該值的取定須參照錶盤刻度值範圍而定
                            intervalColors:['#66cc66', '#E7E658', '#cc6666'],  //分別爲上面分隔的域指定表示的顏色
                            label: '時速：千米/小時'
                             
                        }
                    },
                    grid:{
                        drawBorder:false,
                        shadow:false,
                        background:'transparent'
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="chart1" style="width: 400px;height: 400px;">
            <!--
                描述：圖表展現區域
            -->
        </div>
    </body>
</html>

效果圖：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程