aaa片欧美,seerx性欧美巨大

使用javascript和chart.js創(chuàng)建堆疊進度條圖表教程

本教程詳細介紹了如何利用JavaScript和Chart.js庫在HTML頁面中創(chuàng)建美觀且功能強大的堆疊進度條圖表。通過配置數(shù)據(jù)、圖表類型和堆疊選項，您可以輕松可視化各種狀態(tài)或進度，例如機器運行狀態(tài)或項目里程碑，并實現(xiàn)顏色重復(fù)使用以增強視覺表達力。

引言：堆疊進度條圖表的應(yīng)用與優(yōu)勢

堆疊進度條圖表是一種高效的數(shù)據(jù)可視化工具，它能夠在一個條形中展示多個組成部分的比例或貢獻，從而清晰地呈現(xiàn)整體的構(gòu)成和各部分的相對大小。例如，在工業(yè)場景中，可以使用此類圖表來表示一臺機器在一天內(nèi)不同運行狀態(tài)（運行、停機、維護、空閑）所占用的時間比例；在項目管理中，則可以展示不同任務(wù)階段的完成進度。其主要優(yōu)勢在于直觀性強、信息密度高，且能夠靈活地通過顏色區(qū)分不同狀態(tài)，即使顏色重復(fù)使用也能保持良好的可讀性。

為了在網(wǎng)頁中實現(xiàn)這種圖表，我們通常會借助成熟的JavaScript圖表庫。在眾多選擇中，Chart.js以其輕量級、易用性和強大的功能集脫穎而出，特別適合創(chuàng)建各類交互式圖表，包括我們所需的堆疊條形圖。

準(zhǔn)備工作：引入Chart.js庫

在開始編寫代碼之前，我們需要將Chart.js庫引入到HTML頁面中。最簡單的方式是通過CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）引入。將以下<script>標(biāo)簽添加到HTML文件的<head>或<body>底部：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>堆疊進度條圖表</title>
    <!-- 引入Chart.js庫 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        /* 可選：為圖表容器添加一些樣式 */
        .chart-container {
            width: 80%;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div class="chart-container">
        <canvas id="stackedProgressBarChart"></canvas>
    </div>

    <script>
        // JavaScript 代碼將在這里編寫
    </script>
</body>
</html>

登錄后復(fù)制

創(chuàng)建圖表容器

在HTML中，我們需要一個<canvas>元素作為Chart.js渲染圖表的畫布。為這個畫布指定一個唯一的id，以便在JavaScript中引用它。

立即學(xué)習(xí)“Java免費學(xué)習(xí)筆記（深入）”；

<div class="chart-container">
    <canvas id="stackedProgressBarChart"></canvas>
</div>

登錄后復(fù)制

核心實現(xiàn)：使用JavaScript配置Chart.js

接下來，我們將使用JavaScript來定義圖表的數(shù)據(jù)和配置選項。一個堆疊條形圖的核心在于其data結(jié)構(gòu)和options中的scales配置。

1. 定義圖表數(shù)據(jù)

為了模擬堆疊進度條，我們將創(chuàng)建一個包含多個數(shù)據(jù)集（datasets）的data對象。每個數(shù)據(jù)集代表堆疊條形圖中的一個“層”或一個狀態(tài)。例如，我們可以模擬一臺機器在一天中的不同狀態(tài)時長。

const ctx = document.getElementById('stackedProgressBarChart').getContext('2d');

const chartData = {
    labels: ['機器A'], // 標(biāo)簽可以代表不同的機器、日期或其他分類
    datasets: [
        {
            label: '運行中',
            data: [10], // 機器A運行了10小時
            backgroundColor: 'rgba(75, 192, 192, 0.8)', // 運行狀態(tài)的顏色
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        },
        {
            label: '停機',
            data: [5], // 機器A停機5小時
            backgroundColor: 'rgba(255, 99, 132, 0.8)', // 停機狀態(tài)的顏色
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
        },
        {
            label: '維護中',
            data: [3], // 機器A維護3小時
            backgroundColor: 'rgba(255, 205, 86, 0.8)', // 維護狀態(tài)的顏色
            borderColor: 'rgba(255, 205, 86, 1)',
            borderWidth: 1
        },
        {
            label: '空閑',
            data: [6], // 機器A空閑6小時
            backgroundColor: 'rgba(201, 203, 207, 0.8)', // 空閑狀態(tài)的顏色
            borderColor: 'rgba(201, 203, 207, 1)',
            borderWidth: 1
        }
    ]
};

登錄后復(fù)制

說明：

愛圖表

AI驅(qū)動的智能化圖表創(chuàng)作平臺

查看詳情

labels: 定義了X軸的分類標(biāo)簽。在這個例子中，我們只有一個標(biāo)簽“機器A”，表示我們正在展示“機器A”的每日狀態(tài)。如果你想展示多臺機器或多天的狀態(tài)，可以在這里添加更多標(biāo)簽，并在每個dataset的data數(shù)組中提供對應(yīng)的值。
datasets: 這是一個數(shù)組，每個對象代表圖表中的一個數(shù)據(jù)系列。
- label: 該數(shù)據(jù)系列的名稱，將顯示在圖例和工具提示中。
- data: 對應(yīng)labels數(shù)組的數(shù)據(jù)值。例如，[10]表示“機器A”的“運行中”狀態(tài)持續(xù)了10個單位（例如小時）。
- backgroundColor和borderColor: 定義了該數(shù)據(jù)系列的填充色和邊框色。可以根據(jù)不同的狀態(tài)選擇不同的顏色，也可以重復(fù)使用顏色。

2. 配置圖表選項

為了使條形圖堆疊顯示，我們需要在options中特別配置scales屬性。

const chartOptions = {
    responsive: true, // 使圖表響應(yīng)式調(diào)整大小
    maintainAspectRatio: false, // 允許圖表在響應(yīng)式時改變寬高比
    indexAxis: 'y', // 將條形圖的方向設(shè)置為水平（Y軸為索引軸）
    plugins: {
        title: {
            display: true,
            text: '機器A日狀態(tài)堆疊進度條',
            font: {
                size: 18
            }
        },
        tooltip: {
            mode: 'index',
            intersect: false
        }
    },
    scales: {
        x: {
            stacked: true, // X軸堆疊
            title: {
                display: true,
                text: '時間 (小時)'
            },
            beginAtZero: true // X軸從0開始
        },
        y: {
            stacked: true, // Y軸堆疊
            title: {
                display: true,
                text: '機器'
            }
        }
    }
};

登錄后復(fù)制

說明：

responsive: true 和 maintainAspectRatio: false: 確保圖表能夠適應(yīng)其容器的大小，并且不會強制保持固定的寬高比。
indexAxis: 'y': 將條形圖的方向設(shè)置為水平。默認(rèn)情況下，條形圖是垂直的（indexAxis: 'x'）。對于進度條形式的圖表，水平方向通常更直觀。
plugins.title: 配置圖表的標(biāo)題。
plugins.tooltip: 配置工具提示的顯示模式，mode: 'index'會在鼠標(biāo)懸停在條形上時顯示所有堆疊部分的詳細信息。
scales: 這是最關(guān)鍵的部分。
- x.stacked: true 和 y.stacked: true: 這兩個屬性是實現(xiàn)堆疊效果的關(guān)鍵。 當(dāng)indexAxis: 'y'時，x軸代表數(shù)值，y軸代表分類。因此，將x.stacked設(shè)置為true會使條形圖的數(shù)值部分（長度）堆疊起來，而y.stacked設(shè)置為true則確保了分類軸的正確處理。
- title: 為軸添加標(biāo)題，提高可讀性。
- beginAtZero: true: 確保數(shù)值軸從0開始，避免數(shù)據(jù)偏差。

3. 實例化圖表

將數(shù)據(jù)和選項組合，創(chuàng)建新的Chart實例。

new Chart(ctx, {
    type: 'bar', // 指定圖表類型為條形圖
    data: chartData,
    options: chartOptions
});

登錄后復(fù)制

將上述JavaScript代碼片段整合到HTML文件的<script>標(biāo)簽中，即可生成一個堆疊進度條圖表。

完整示例代碼

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>堆疊進度條圖表教程</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f4f4f4;
            margin: 0;
        }
        .chart-container {
            width: 90%; /* 調(diào)整寬度以適應(yīng)內(nèi)容 */
            max-width: 800px; /* 最大寬度 */
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        canvas {
            height: 200px !important; /* 設(shè)置畫布高度，!important 確保覆蓋默認(rèn)樣式 */
        }
    </style>
</head>
<body>
    <div class="chart-container">
        <canvas id="stackedProgressBarChart"></canvas>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('stackedProgressBarChart').getContext('2d');

            const chartData = {
                labels: ['機器A'], // 標(biāo)簽可以代表不同的機器、日期或其他分類
                datasets: [
                    {
                        label: '運行中',
                        data: [10], // 機器A運行了10小時
                        backgroundColor: 'rgba(75, 192, 192, 0.8)', // 運行狀態(tài)的顏色
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    },
                    {
                        label: '停機',
                        data: [5], // 機器A停機5小時
                        backgroundColor: 'rgba(255, 99, 132, 0.8)', // 停機狀態(tài)的顏色
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 1
                    },
                    {
                        label: '維護中',
                        data: [3], // 機器A維護3小時
                        backgroundColor: 'rgba(255, 205, 86, 0.8)', // 維護狀態(tài)的顏色
                        borderColor: 'rgba(255, 205, 86, 1)',
                        borderWidth: 1
                    },
                    {
                        label: '空閑',
                        data: [6], // 機器A空閑6小時
                        backgroundColor: 'rgba(201, 203, 207, 0.8)', // 空閑狀態(tài)的顏色
                        borderColor: 'rgba(201, 203, 207, 1)',
                        borderWidth: 1
                    }
                ]
            };

            const chartOptions = {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: 'y', // 使條形圖水平顯示
                plugins: {
                    title: {
                        display: true,
                        text: '機器A日狀態(tài)堆疊進度條',
                        font: {
                            size: 18
                        }
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false
                    },
                    legend: {
                        position: 'bottom', // 將圖例放在底部
                    }
                },
                scales: {
                    x: {
                        stacked: true, // X軸堆疊
                        title: {
                            display: true,
                            text: '時間 (小時)'
                        },
                        beginAtZero: true,
                        max: 24 // 假設(shè)總時長為24小時
                    },
                    y: {
                        stacked: true, // Y軸堆疊
                        title: {
                            display: true,
                            text: '機器'
                        },
                        grid: {
                            display: false // 隱藏Y軸網(wǎng)格線
                        }
                    }
                }
            };

            new Chart(ctx, {
                type: 'bar',
                data: chartData,
                options: chartOptions
            });
        });
    </script>
</body>
</html>

登錄后復(fù)制

注意事項與進階

數(shù)據(jù)動態(tài)加載: 在實際應(yīng)用中，圖表數(shù)據(jù)通常來自后端API。您可以使用fetch或axios等工具從服務(wù)器獲取數(shù)據(jù)，然后更新chartData對象并重新渲染圖表。
多條堆疊進度條: 如果您需要顯示多條堆疊進度條（例如，多臺機器或多天的狀態(tài)），只需在labels數(shù)組中添加更多標(biāo)簽，并在每個dataset的data數(shù)組中為每個標(biāo)簽提供相應(yīng)的值。
```
// 示例：多條堆疊進度條
labels: ['機器A', '機器B', '機器C'],
datasets: [
    { label: '運行中', data: [10, 8, 12], backgroundColor: 'green' },
    { label: '停機', data: [5, 7, 3], backgroundColor: 'red' },
    // ... 其他數(shù)據(jù)集
]
```
登錄后復(fù)制
顏色管理: Chart.js支持各種顏色格式（HEX、RGB、RGBA）。您可以定義一個顏色數(shù)組，根據(jù)狀態(tài)類型或數(shù)據(jù)系列索引動態(tài)分配顏色。如果需要重復(fù)使用顏色，只需在backgroundColor屬性中重復(fù)指定即可。
圖表交互: Chart.js提供了豐富的交互功能，如工具提示（tooltip）、圖例（legend）點擊過濾等。通過配置plugins選項可以進一步定制這些行為。
響應(yīng)式設(shè)計: 確保responsive: true和maintainAspectRatio: false能夠讓圖表更好地適應(yīng)不同屏幕尺寸。您也可以通過CSS控制canvas父容器的尺寸。
性能優(yōu)化: 對于大量數(shù)據(jù)的圖表，考慮使用chart.js/auto而不是完整的chart.js，或者按需導(dǎo)入模塊。

總結(jié)

通過本教程，您已經(jīng)掌握了如何使用Chart.js庫在HTML頁面中創(chuàng)建具有堆疊效果的進度條圖表。關(guān)鍵在于正確配置data中的datasets來表示堆疊的各個部分，以及在options.scales中將stacked屬性設(shè)置為true。這種圖表形式在展示比例、構(gòu)成和狀態(tài)變化方面具有極高的視覺效率，是數(shù)據(jù)可視化工具箱中不可或缺的一部分。結(jié)合Chart.js強大的定制能力，您可以根據(jù)具體需求創(chuàng)建出滿足各種業(yè)務(wù)場景的專業(yè)級圖表。

以上就是使用JavaScript和Chart.js創(chuàng)建堆疊進度條圖表教程的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)標(biāo)簽：