jqPlot圖表插件學習之數據節點高亮和光標提示

一、准備工作

      首先我們需要到官網下載所需的文件：

官網下載（筆者選擇的是jquery.jqplot.1.0.8r1250.zip這個版本）

 

 

      然后讀者需要根據自己的情況新建一個項目並且按照如下的方式加載對應的js和css（因為筆者在VS2012環境下新建的，並且所需的js和css都會對應的放到js和css文件夾下，請讀者根據自己的情況修正加載的路徑）。

<link href="css/jquery.jqplot.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.jqplot.min.js"></script>

<!--[if lt IE 9]>
<script src="js/excanvas.min.js"></script>
<![endif]-->
<script src="js/jqplot.highlighter.min.js"></script>
<script src="js/jqplot.cursor.min.js"></script>
<script src="js/jqplot.dateAxisRenderer.min.js"></script>

      其中最后兩個js文件在plugins下，今后會經常使用到這個文件夾下的文件，因為他們是很多擴展功能所需的文件。除了引用基本的文件之后我們還需要放置一個占位符用來作為圖表的容器，我們需要放置一個寬度為500高度為300的DIV:

<div id="chart" style="width:500px;height:300px;" ></div>

 

 

 

二、正文

      本節我們將學習如何在折線圖中高亮用戶選擇的節點並顯示對應的數據，關鍵主要是設置highlighter屬性，比如下面的代碼將可以實現圖1.1的效果：

        $(function () {
            var line1 = [['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88],
                ['22-Aug-08', 509.84], ['26-Sep-08', 454.13], ['24-Oct-08', 379.75],
                ['21-Nov-08', 303], ['26-Dec-08', 308.56], ['23-Jan-09', 299.14],
                ['20-Feb-09', 346.51], ['20-Mar-09', 325.99], ['24-Apr-09', 386.15]];
            
            $.jqplot('chart', [line1], {
                title: "數據節點高亮",
                axes: {
                    xaxis: {
                        renderer: $.jqplot.DateAxisRenderer,
                        tickOptions: {
                            formatString: "%b %#d"
                        }
                    },
                    yaxis: {
                        tickOptions: {
                            formatString: "$%.2f"
                        }
                    }
                },
                highlighter: {
                    show: true,
                    sizeAdjust: 15
                }
            });
        });

      讀者主要這里的分類名稱的格式是時間，而不是單純的名稱了，所以我們需要借助特定的引擎來輸出，所以這里我們借助了dateAxisRenderer引擎來輸出，當然讀者也可以使用之前的引擎，只是會將這個時間按照原版的樣子輸出而已，然后就是tickOptions屬性中的formatString屬性，它是用來指定顯示的文字的格式。這里關鍵的是highlighter屬性，其中show表示是否啟用，而sizeAdjust則表示高亮的程度，我們可以通過下面這個圖看出效果。

 

圖1.1

 

      當我們指定sizeAdjust的值越大，則這個圈也越大。

 

      上圖中我們可以看到，只有我們選擇了某個節點才可以看到對應的值，但是我們還可以通過另一種指針的方式查看整個圖表所選位置的X軸信息以及Y軸信息，通過這個方式我們就可以查看折線圖中折線的大致值了，下面我們就通過指定cursor來實現圖1.2的效果：

        $(function () {
            var line1 = [['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88],
                ['22-Aug-08', 509.84], ['26-Sep-08', 454.13], ['24-Oct-08', 379.75],
                ['21-Nov-08', 303], ['26-Dec-08', 308.56], ['23-Jan-09', 299.14],
                ['20-Feb-09', 346.51], ['20-Mar-09', 325.99], ['24-Apr-09', 386.15]];

            $.jqplot('chart', [line1], {
                title: "數據節點高亮",
                axes: {
                    xaxis: {
                        renderer: $.jqplot.DateAxisRenderer,
                        tickOptions: {
                            formatString: "%b %#d"
                        }
                    },
                    yaxis: {
                        tickOptions: {
                            formatString: "$%.2f"
                        }
                    }
                },
                highlighter: {
                    show: true,
                    sizeAdjust: 15
                },
                cursor: {
                    show: true,
                    tooltipLocation: 'sw'
                }
            });
        });

      這里的curosr跟highlighter類似，首先要啟用，然后通過tooltipLocation指定提示顯示的位置。

 

圖1.2