使用PHP和Chart.js建立多圖表資料視覺化應用程式

隨著網路的不斷發展，大量的資料被產生並儲存在各種網路應用程式和系統中，尤其是像電子商務、社交網路、金融和製造業等領域。為了從這些數據中汲取更多的信息，數據視覺化已成為一種流行的方法。透過將資料轉換為圖形形式，使用者可以更容易理解和分析資料。在本文中，我們將介紹如何使用PHP和Chart.js來建立多圖表資料視覺化應用程式。

什麼是Chart.js？

Chart.js是一種開源的JavaScript函式庫，允許建立可互動的、動態的和響應式的圖表。它支援多種類型的圖表，如長條圖、圓餅圖、折線圖等。 Chart.js只需要一小部分的配置和一些HTML標記就可以自動產生簡潔和優美的圖表。更重要的是，Chart.js使用基於HTML5的Canvas元素渲染圖表，因此可以在支援HTML5的瀏覽器上運行。

使用PHP和Chart.js建立多圖表資料視覺化應用程式

在本教學中，我們將介紹如何使用PHP和Chart.js來建立一個簡單的資料視覺化應用程式。我們將使用MySQL作為資料庫，PHP和Chart.js將用於查詢和視覺化資料。

步驟1：建立資料庫表格

首先，我們需要建立一個名為「sales」的資料庫，並在其中建立一個名為「sales_data」的表。表格應包含以下欄位：

• id: 自成長ID
• month: 銷售月份
• revenue: 銷售收入
• profit: 利潤

使用下列SQL語句來建立該表：

CREATE TABLE sales_data (
id INT NOT NULL AUTO_INCREMENT,
month DATE NOT NULL,
revenue DECIMAL (10, 2) NOT NULL,
profit DECIMAL(10, 2) NOT NULL,
PRIMARY KEY (id)
);

我們將使用PHP程式碼來向該表中插入一些模擬銷售數據。

步驟2：建立PHP腳本

接下來，我們需要建立一個PHP腳本，該腳本將連接到MySQL資料庫並讀取銷售資料。該腳本將傳回一個JSON格式的數據，該數據可用於在Chart.js中顯示圖表。

以下是PHP腳本的範例程式碼：

#//連接到MySQL資料庫
$username = "root";
$ password = "";
$database = "sales";
$server = "localhost";

$conn = new mysqli($server, $username, $password, $database);

//檢查連線是否成功
if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

//查詢MySQL資料庫
$query = "SELECT * FROM sales_data";
$result = $conn->query($query);

//將查詢結果格式化為JSON格式
$data = array();
while($row = $result->fetch_assoc()) {

$data[] = $row;

}

echo json_encode($data);

#//關閉MySQL連接
$conn->close();

?>

請注意，該腳本會輸出一個JSON格式的字串。該字串包含所有查詢到的銷售資料。

步驟3：建立HTML和JavaScript檔案

現在，我們需要建立一個HTML檔案來顯示Chart.js圖表，以及一個JavaScript檔案來處理和繪製Chart.js圖表。

以下是HTML檔案的範例程式碼：

請注意，我們使用了Chart.js庫的JavaScript檔案。我們也將一個自訂的JavaScript檔案（app.js）包含在HTML檔案中。這將是用於查詢資料和繪製圖表的JavaScript檔案。

以下是JavaScript檔案的範例程式碼：

//查詢MySQL資料庫

function loadSalesData(callback) {

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        callback(xhr.responseText);
    }
}
xhr.open('GET', 'sales.php');
xhr.send();

}

#//繪製折線圖

function drawLineChart(id, labels, data, label) {

var ctx = document.getElementById(id).getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: labels,
        datasets: [{
            label: label,
            data: data,
            borderColor: 'rgb(75, 192, 192)',
            fill: false
        }]
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: '销售收入'
        },
        tooltips: {
            mode: 'index',
            intersect: false
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: '月份'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: '金额'
                }
            }]
        }
    }
});

}

//載入資料並繪製圖表

#loadSalesData(function(response) {

//解析JSON格式的数据
var data = JSON.parse(response);

//获取月份和销售收入数据
var months = [];
var revenues = [];
for (var i = 0; i < data.length; i++) {
    months.push(data[i].month);
    revenues.push(data[i].revenue);
}

//绘制销售收入折线图
drawLineChart('revenue-chart', months, revenues, '销售收入');

//获取月份和利润数据
var profits = [];
for (var i = 0; i < data.length; i++) {
    profits.push(data[i].profit);
}

//绘制利润折线图
drawLineChart('profit-chart', months, profits, '利润');

});

請注意，我們定義了兩個函式：loadSalesData和drawLineChart。 loadSalesData函數用於從PHP腳本載入JSON格式的數據，而drawLineChart函數用於在Canvas元素中繪製折線圖。

我們使用了Chart.js庫的一個範例，該範例繪製了折線圖，並使用了銷售收入和利潤資料。

步驟4：運行應用程式

現在，我們已經準備好運行我們的應用程式了！只需要將HTML檔案和JavaScript檔案上傳到網頁伺服器上，並在瀏覽器中開啟該HTML檔案即可。我們將得到兩個圖表：一個是銷售收入圖表，另一個是利潤圖表。 ######結論###

在本文中，我們介紹如何使用PHP和Chart.js建立多圖表資料視覺化應用程式。我們從建立資料庫表格開始，然後建立了一個PHP腳本來查詢資料。接下來，我們在HTML檔案中使用了Chart.js庫，並在JavaScript檔案中使用了該程式庫來處理和繪製圖表。最後，我們運行我們的應用程式並獲得了兩個漂亮的折線圖表。使用PHP和Chart.js建立資料視覺化應用程式非常簡單，您可以利用該技術來在任何網路應用程式中視覺化資料。

以上是使用PHP和Chart.js建立多圖表資料視覺化應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！