如何在VS Code中预览Chart.js v4.0.1图表示例？

问题描述 #

已获取Chart.js v4.0.1的图表示例代码，安装了Node.js、PNPM，使用Visual Studio Code编辑代码，但无法预览图表，仅能查看代码内容。尝试过多个VS Code扩展，要么与Chart.js v4.0.1不兼容，要么版本过于老旧（多为2019年开发），无法适配2022年推出的Chart.js v4.0.1版本。需求是在VS Code中运行Chart.js代码并显示图表，同时希望得到适配Chart.js的VS Code扩展推荐。

提供的示例代码：

// <block:actions:2>
const actions = [
  {
    name: 'Randomize',
    handler(chart) {
      chart.data.datasets.forEach(dataset => {
        dataset.data = chart.data.labels.map(() => {
          return [Utils.rand(-100, 100), Utils.rand(-100, 100)];
        });
      });
      chart.update();
    }
  },
];
// </block:actions>

// <block:setup:1>
const DATA_COUNT = 7;
const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [
    {
      label: 'Dataset 1',
      data: labels.map(() => {
        return [Utils.rand(-100, 100), Utils.rand(-100, 100)];
      }),
      backgroundColor: Utils.CHART_COLORS.red,
    },
    {
      label: 'Dataset 2',
      data: labels.map(() => {
        return [Utils.rand(-100, 100), Utils.rand(-100, 100)];
      }),
      backgroundColor: Utils.CHART_COLORS.blue,
    },
  ]
};
// </block:setup>

// <block:config:0>
const config = {
  type: 'bar',
  data: data,
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Chart.js Floating Bar Chart'
      }
    }
  }
};
// </block:config>

module.exports = {
  actions: actions,
  config: config,
};

解决方案 #

一、本地搭建基础项目运行（最稳妥，无版本兼容问题） #

你提供的代码是Chart.js官网演示框架专用的模块导出代码，无法直接运行，需要调整为浏览器可执行的格式，步骤如下：

1. 初始化项目并安装依赖
   在项目文件夹中打开终端，执行以下命令：

pnpm init -y
pnpm add chart.js

2. 创建可运行的HTML文件
   新建index.html文件，将以下代码粘贴进去：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Chart.js 浮动条形图演示</title>
    <!-- 引入本地安装的Chart.js -->
    <script src="node_modules/chart.js/dist/chart.umd.js"></script>
</head>
<body>
    <!-- 图表画布 -->
    <canvas id="myChart" style="width: 80%; height: 400px; margin: 20px auto;"></canvas>
    <script>
        // 补充Chart.js官网示例用到的Utils工具函数
        const Utils = {
            rand(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            },
            months({count}) {
                const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月'];
                return months.slice(0, count);
            },
            CHART_COLORS: {
                red: 'rgb(255, 99, 132)',
                blue: 'rgb(54, 162, 235)'
            }
        };

        // 原示例代码逻辑调整（去掉module.exports，直接初始化图表）
        const actions = [
            {
                name: 'Randomize',
                handler(chart) {
                    chart.data.datasets.forEach(dataset => {
                        dataset.data = chart.data.labels.map(() => {
                            return [Utils.rand(-100, 100), Utils.rand(-100, 100)];
                        });
                    });
                    chart.update();
                }
            },
        ];

        const DATA_COUNT = 7;
        const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};

        const labels = Utils.months({count: 7});
        const data = {
            labels: labels,
            datasets: [
                {
                    label: '数据集1',
                    data: labels.map(() => {
                        return [Utils.rand(-100, 100), Utils.rand(-100, 100)];
                    }),
                    backgroundColor: Utils.CHART_COLORS.red,
                },
                {
                    label: '数据集2',
                    data: labels.map(() => {
                        return [Utils.rand(-100, 100), Utils.rand(-100, 100)];
                    }),
                    backgroundColor: Utils.CHART_COLORS.blue,
                },
            ]
        };

        const config = {
            type: 'bar',
            data: data,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'Chart.js 浮动条形图'
                    }
                }
            }
        };

        // 初始化图表
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, config);

        // 添加随机化按钮
        const randomBtn = document.createElement('button');
        randomBtn.textContent = '随机更新数据';
        randomBtn.style = 'padding: 8px 16px; margin-left: 20px;';
        randomBtn.onclick = () => actions[0].handler(myChart);
        document.body.appendChild(randomBtn);
    </script>
</body>
</html>

3. 启动本地服务预览
   安装VS Code的Live Server扩展，右键点击index.html文件，选择「Open with Live Server」，浏览器会自动打开并显示图表，点击「随机更新数据」按钮还能触发数据更新。

二、适配Chart.js的VS Code扩展推荐 #

• Live Server：通用静态文件服务器扩展，无版本兼容问题，只要代码能在浏览器运行，就能通过它预览，是最稳妥的选择。
• Chart.js Preview：选择最近更新的版本（查看扩展商店的更新时间），部分维护中的版本支持Chart.js v4，但仍推荐Live Server，因为它适配所有前端场景，不会受Chart.js版本限制。

内容的提问来源于stack exchange，提问作者EvaT