JavaScript >> Javascript 文檔 >  >> jQuery

使用 jQuery 和 xCharts 為您的應用程序製作漂亮的圖表

在呈現數據時,圖表是一個很好的視覺輔助工具。沒有它們,您將無法構建專業的管理面板。它們的設置也很棘手。但是,有一個新的庫可以讓事情變得更簡單——xCharts。今天,我們將使用它與 Twitter Bootstrap 的日期範圍選擇器一起使用,為您的 Web 應用程序構建一個漂亮的、由 AJAX 驅動的圖表,該圖表從 MySQL 表中獲取數據。

HTML

演示的 HTML 結構非常簡單 - 我們必須在頁面上添加元素來初始化圖表和日期選擇器。由於我們無論如何都在頁面中包含引導程序,因此我們可以利用其表單樣式功能和圖標使其看起來不錯。

index.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <title>Pretty Charts with jQuery and AJAX | Tutorialzine Demo</title>
        <link href="assets/css/xcharts.min.css" rel="stylesheet">
        <link href="assets/css/style.css" rel="stylesheet">

        <!-- Include bootstrap css -->
        <link href="assets/css/daterangepicker.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet" />

    </head>
    <body>
        <div id="content">

            <form class="form-horizontal">
              <fieldset>
                <div class="input-prepend">
                  <span class="add-on"><i class="icon-calendar"></i></span>
                  <input type="text" name="range" id="range" />
                </div>
              </fieldset>
            </form>

            <div id="placeholder">
                <figure id="chart"></figure>
            </div>

        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

        <!-- xcharts includes -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.js"></script>
        <script src="assets/js/xcharts.min.js"></script>

        <!-- The daterange picker bootstrap plugin -->
        <script src="assets/js/sugar.min.js"></script>
        <script src="assets/js/daterangepicker.js"></script>

        <!-- Our main script file -->
        <script src="assets/js/script.js"></script>

    </body>
</html>

我們在這裡包含了大量的外部資源。在 head 部分,我們有 xcharts 的 css 文件 , 日期選擇器 , 引導 (包含在 cloudflare 的超快速 cdn 中)和我們的 style.css 文件。

在結束 body 標籤之前,我們有 jQuery 庫,d3.js (xcharts 需要),xcharts ,優雅的 Sugar.js 庫(日期範圍插件需要),日期範圍插件 和我們的 script.js .在接下來的步驟中,您將看到所有這些如何協同工作。

MySQL 表

正如我在介紹中提到的,我們正在編寫的腳本將從 MySQL 表中獲取其數據並將其顯示在圖表上。您可以在 schema.sql 中找到將創建表的 SQL 代碼 在 zip 文件中,可從上面的按鈕下載。表格是這樣的:

它只有三個字段。日期字段被分配了一個唯一的索引,這意味著同一天不能有重複的記錄。 sales_ord 字段保存當天的銷售額。您的數據庫肯定會有所不同,但只要您從 PHP 腳本返回正確的 JSON 響應,就不會有任何問題(下一節將詳細介紹)。

PHP 代碼

在我們的 PHP 腳本中,我們將從表中選擇與傳遞的開始和結束日期相對應的記錄,組裝一個數組,並將其輸出為 JSON:

ajax.php

header('Content-Type: application/json');

// Set up the ORM library
require_once('setup.php');

if (isset($_GET['start']) AND isset($_GET['end'])) {

    $start = $_GET['start'];
    $end = $_GET['end'];
    $data = array();

    // Select the results with Idiorm
    $results = ORM::for_table('chart_sales')
            ->where_gte('date', $start)
            ->where_lte('date', $end)
            ->order_by_desc('date')
            ->find_array();

    // Build a new array with the data
    foreach ($results as $key => $value) {
        $data[$key]['label'] = $value['date'];
        $data[$key]['value'] = $value['sales_order'];
    }

    echo json_encode($data);
}

在這裡,我使用了我最喜歡的庫——Idiorm。我之前在網站的教程(以及許多個人項目)中使用過它。它只有一個文件(位於 lib/ 文件夾中),使使用數據庫成為一種純粹的樂趣。我所做的只是從數據庫中選擇所有結果,這些結果的日期值介於請求傳遞的開始和結束時間戳之間。

生成的 JSON 響應如下所示:

[{
    "label": "2013-01-07",
    "value": "4"
}, {
    "label": "2013-01-06",
    "value": "65"
}, {
    "label": "2013-01-05",
    "value": "96"
}]

標籤 屬性包含相應行的 MySQL 日期值,以及 values - 當天的銷售數量。由我們的 JavaScript 代碼來正確處理這些數據並將其轉換為適合與 xCharts 插件一起使用的格式。

JavaScript

我們所有的 JS 代碼都在 assets/js/script.js .代碼有點長,為了便於理解,我分塊給大家。

首先,我們將聲明一些變量並初始化日期範圍選擇器插件。請注意,我鏈接到的日期範圍是原始插件的一個分支。我決定使用這個版本,因為原始版本依賴於 date.js - 一個與 xCharts 衝突的非常古老的日期/時間庫。 fork 使用的是 Sugar.js,這是一個不錯的實用程序庫,具有強大的日期和時間支持。

assets/js/script.js

$(function() {

    // Set the default dates, uses sugarjs' methods
    var startDate   = Date.create().addDays(-6),    // 6 days ago
        endDate     = Date.create();                // today

    var range = $('#range');

    // Show the dates in the range input
    range.val(startDate.format('{MM}/{dd}/{yyyy}') + ' -
        ' + endDate.format('{MM}/{dd}/{yyyy}'));

    // Load chart
    ajaxLoadChart(startDate,endDate);

    range.daterangepicker({

        startDate: startDate,
        endDate: endDate,

        ranges: {
            'Today': ['today', 'today'],
            'Yesterday': ['yesterday', 'yesterday'],
            'Last 7 Days': [Date.create().addDays(-6), 'today'],
            'Last 30 Days': [Date.create().addDays(-29), 'today']
            // You can add more entries here
        }
    },function(start, end){

        ajaxLoadChart(start, end);

    });

如您所見,我們充分利用了 Sugar.js 的日期和時間方法來定義範圍的起點和終點。我正在使用過去 7 天的結果初始化腳本,並更新範圍輸入字段。

現在讓我們創建圖表:

    // The tooltip shown over the chart
    var tt = $('<div class="ex-tooltip">').appendTo('body'),
        topOffset = -32;

    var data = {
        "xScale" : "time",
        "yScale" : "linear",
        "main" : [{
            className : ".stats",
            "data" : []
        }]
    };

    var opts = {
        paddingLeft : 50,
        paddingTop : 20,
        paddingRight : 10,
        axisPaddingLeft : 25,
        tickHintX: 9, // How many ticks to show horizontally

        dataFormatX : function(x) {

            // This turns converts the timestamps coming from
            // ajax.php into a proper JavaScript Date object

            return Date.create(x);
        },

        tickFormatX : function(x) {

            // Provide formatting for the x-axis tick labels.
            // This uses sugar's format method of the date object. 

            return x.format('{MM}/{dd}');
        },

        "mouseover": function (d, i) {
            var pos = $(this).offset();

            tt.text(d.x.format('{Month} {ord}') + ': ' + d.y).css({

                top: topOffset + pos.top,
                left: pos.left

            }).show();
        },

        "mouseout": function (x) {
            tt.hide();
        }
    };

    // Create a new xChart instance, passing the type
    // of chart a data set and the options object

    var chart = new xChart('line-dotted', data, '#chart' , opts);

首先,我為 xCharts 定義了一個配置對象,其中包含屬性和回調函數。在 dataFormatX 屬性,我正在將從 AJAX 請求返回的 yyyy-mm-dd 字符串轉換為適當的 JavaScript Date 對象,以便插件可以正確顯示它們並進行計算。

我還為 mouseover/mouseout 插件事件傳遞了一個事件處理程序,並使用它們來顯示工具提示(該插件沒有開箱即用)。

最後,這裡是使用 AJAX 加載數據的 JavaScript 函數:

   // Function for loading data via AJAX and showing it on the chart
    function ajaxLoadChart(startDate,endDate) {

        // If no data is passed (the chart was cleared)

        if(!startDate || !endDate){
            chart.setData({
                "xScale" : "time",
                "yScale" : "linear",
                "main" : [{
                    className : ".stats",
                    data : []
                }]
            });

            return;
        }

        // Otherwise, issue an AJAX request

        $.getJSON('ajax.php', {

            start:  startDate.format('{yyyy}-{MM}-{dd}'),
            end:    endDate.format('{yyyy}-{MM}-{dd}')

        }, function(data) {

            var set = [];
            $.each(data, function() {
                set.push({
                    x : this.label,
                    y : parseInt(this.value, 10)
                });
            });

            chart.setData({
                "xScale" : "time",
                "yScale" : "linear",
                "main" : [{
                    className : ".stats",
                    data : set
                }]
            });

        });
    }
});

xCharts 公開了 setData 方法,以便您可以輕鬆替換顯示的數據。 className 屬性很重要,因為這是插件用來識別圖表的。如果省略這個屬性,就會出現各種奇怪的錯誤(相信我,我知道)。

這樣我們漂亮的圖表就完成了!

我們完成了!

您可以使用此示例來增強您的管理區域並在漂亮的界面中可視化統計數據。


Tutorial JavaScript 教程
  1. 一些你應該知道的 JavaScript 原則。

  2. JavaScript 簡史

  3. 邏輯運算符(第 1 部分)

  4. 使用 React 客戶端應用程序調試 React 源代碼

  5. 我可以在整個頁面加載之前運行 javascript 嗎?

  6. 通過玩遊戲學習編碼🎮

  7. 介紹 Authorizer.dev

  1. 在 JavaScript 中突出顯示圖像的一部分

  2. 使用 Google Console(可選)和 Apps 腳本免費部署純 JavaScript 全棧 Web 應用

  3. 在 React 中導入圖像

  4. 什麼是單頁應用程序?以及 SPA 和多頁應用程序之間的區別。

  5. 關於 JavaScript 中的一元運算符你應該知道的那些事

  6. Vue 中的事件處理

  7. 了解 React Redux - 簡介

  1. 實用 Puppeteer:使用代理瀏覽頁面

  2. 中間人使用劇作家

  3. 瀏覽器中的語音轉文本

  4. 如何在 Cloudinary Nodejs REST 中存儲圖像