Chart.js 流式插件使用教程

2026-01-17 09:33:31作者：郁楠烈Hubert

项目目录结构及介绍

chartjs-plugin-streaming/
├── dist/
│   ├── chartjs-plugin-streaming.js
│   └── chartjs-plugin-streaming.min.js
├── docs/
│   ├── index.html
│   └── ...
├── samples/
│   ├── basic.html
│   └── ...
├── src/
│   ├── plugin.js
│   └── ...
├── test/
│   ├── plugin.test.js
│   └── ...
├── .gitignore
├── LICENSE
├── package.json
├── README.md
└── webpack.config.js

dist/: 包含编译后的插件文件，可以直接在项目中使用。
docs/: 包含项目的文档文件。
samples/: 包含示例文件，展示如何使用插件。
src/: 包含插件的源代码。
test/: 包含测试文件。
.gitignore: Git忽略文件配置。
LICENSE: 项目许可证。
package.json: 项目依赖和脚本配置。
README.md: 项目介绍和使用说明。
webpack.config.js: Webpack配置文件。

项目的启动文件介绍

项目的启动文件主要是 samples/ 目录下的示例文件，例如 basic.html。这些文件展示了如何使用 chartjs-plugin-streaming 插件来创建实时流式图表。

<!DOCTYPE html>
<html>
<head>
    <title>Chart.js Streaming Plugin Sample</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
    <script src="../dist/chartjs-plugin-streaming.min.js"></script>
</head>
<body>
    <canvas id="myChart"></canvas>
    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    label: 'Dataset 1',
                    data: []
                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        type: 'realtime',
                        realtime: {
                            onRefresh: function(chart) {
                                chart.data.datasets.forEach(function(dataset) {
                                    dataset.data.push({
                                        x: Date.now(),
                                        y: Math.random()
                                    });
                                });
                            },
                            delay: 2000
                        }
                    }]
                }
            }
        });
    </script>
</body>
</html>

项目的配置文件介绍

项目的配置文件主要是 package.json 和 webpack.config.js。

`package.json`

{
  "name": "chartjs-plugin-streaming",
  "version": "1.9.0",
  "description": "Chart.js plugin for live streaming data",
  "main": "dist/chartjs-plugin-streaming.js",
  "scripts": {
    "build": "webpack",
    "test": "jest"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/nagix/chartjs-plugin-streaming.git"
  },
  "keywords": [
    "chart.js",
    "plugin",
    "live",
    "streaming",
    "realtime"
  ],
  "author": "Akihiko Kusanagi",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/nagix/chartjs-plugin-streaming/issues"
  },
  "homepage": "https://github.com/nagix/chartjs-plugin-streaming#readme",
  "devDependencies": {
    "chart.js": "^2.9.4",
    "jest": "^26.6.3",
    "webpack": "^4.44