Tutorial: Chart.js 演示

Chart.js 演示

Chart.js 是一个基于 HTML5 canvas 的灵活图表库，EBPro 的 JS Object 支持该能力。借助一个辅助类，我们可以在 EBPro 中使用 Chart.js 绘制不同类型的图表。

在此示例中，我们为 JS Object 的 Canvas 类填充所需的属性，以便可以使用 Chart.js 绘制各种图表。

demo screenshot

可在此下载示例： jsobject-chartjs-20260306.cmtp

简单折线图示例

步骤 1. 下载 Chart.js 库以及日期适配器（如果你希望在图表中使用时间坐标轴）。我们已为你准备好以下文件：

步骤 2. 打开 EasyBuilder Pro，并在需要时创建一个新项目。

步骤 3. 将步骤 1 下载的文件导入到 [JS Resource]。

步骤 4. 创建一个新的 JS Object：

const chartjs = require('./chartjs-v4.4.1.umd.min.js');
const chartjsHelper = require('./chartjs-ebpro-helper.js');

// Wrap EBPro Canvas with helper functions to be used with Chart.js
var ctx = new chartjsHelper.CanvasWrapper();
this.widget.add(ctx);

// chartjs
const lineChart = new chartjs.Chart(ctx, {
    type: 'line',
    data: {
        labels: [
            'January',
            'February',
            'March',
            'April',
            'May',
            'June',
        ],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
        }]
    },
    options: {}
});

步骤 5. 运行项目后，你应能在屏幕上看到一张折线图。你可以按需修改图表类型、数据和配置项，以创建不同图表。

demo screenshot

该项目也可在此下载： demo-0-simple-line.cmtp

其他示例