使用ChartJS的EJS标签？

基础概念

ChartJS 是一个基于 JavaScript 的图表库，用于创建各种类型的图表，如折线图、柱状图、饼图等。EJS（Embedded JavaScript）是一种简单的模板语言，允许你在 HTML 中嵌入 JavaScript 代码。

类型

ChartJS：折线图、柱状图、饼图、雷达图、散点图等。
EJS：模板引擎，用于生成 HTML 内容。

应用场景

ChartJS：适用于数据可视化，如数据分析、报表展示、仪表盘等。
EJS：适用于需要动态生成 HTML 内容的场景，如博客系统、电子商务网站等。

使用 ChartJS 的 EJS 标签示例

假设你有一个简单的 EJS 模板和一个 ChartJS 图表配置，以下是如何在 EJS 模板中使用 ChartJS 的示例：

EJS 模板 (`chart.ejs`)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChartJS with EJS</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="200"></canvas>
    <script>
        const ctx = document.getElementById('myChart').getContext('2d');
        const chartData = <%- JSON.stringify(chartData) %>;
        new Chart(ctx, {
            type: 'bar',
            data: chartData,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
</body>
</html>

后端代码 (Node.js)

const express = require('express');
const app = express();
const ejs = require('ejs');

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    const chartData = {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    };
    res.render('chart', { chartData });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

可能遇到的问题及解决方法

ChartJS 图表未显示：
- 原因：可能是由于 canvas 元素未正确加载或 ChartJS 库未正确引入。
- 解决方法：确保 canvas 元素的 ID 正确，并且 ChartJS 库已正确引入。

EJS 模板渲染错误：
- 原因：可能是由于 EJS 模板语法错误或数据传递错误。
- 解决方法：检查 EJS 模板中的语法错误，并确保数据正确传递到模板中。
数据格式错误：
- 原因：可能是由于传递给 ChartJS 的数据格式不正确。
- 解决方法：确保传递给 ChartJS 的数据格式符合 ChartJS 的要求。