如何用Chart.js 3.9.1创建柱状图并在运行时生成指定datasets结构

一、基础柱状图创建步骤 #

1. 引入Chart.js 3.9.1
   可通过CDN或本地文件引入：

   <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
   

2. 添加Canvas渲染容器
   在HTML中定义用于展示图表的canvas元素：

   <canvas id="barChart" width="400" height="400"></canvas>
   

3. 初始化柱状图实例
   通过JS获取canvas上下文，配置图表参数并创建实例：

   const ctx = document.getElementById('barChart').getContext('2d');
   // 动态生成目标datasets（下文详细实现）
   const datasets = generateFruitDatasets();
   
   const barChart = new Chart(ctx, {
       type: 'bar',
       data: {
           labels: ['水果销量'], // x轴标签
           datasets: datasets
       },
       options: {
           responsive: true,
           scales: {
               y: {
                   beginAtZero: true,
                   title: { display: true, text: '销量数值' }
               },
               x: {
                   title: { display: true, text: '水果种类' }
               }
           }
       }
   });
   

二、运行时动态生成指定datasets结构 #

通过定义基础配置数组，结合循环生成符合要求的datasets：

function generateFruitDatasets() {
    // 存储水果的标签与背景色配置
    const fruitBaseConfigs = [
        { label: 'Apples', backgroundColor: '#AF7' },
        { label: 'Oranges', backgroundColor: '#FA4' },
        { label: 'Mangos', backgroundColor: '#FF7' },
        { label: 'Avocados', backgroundColor: '#2A7' }
    ];

    // 遍历配置，为每个水果生成带随机数据的dataset对象
    return fruitBaseConfigs.map(config => ({
        ...config,
        data: [Math.random() * 100]
    }));
}

核心说明 #

• 把水果的固定配置（标签、背景色）抽离成数组，方便后续修改或扩展
• 用map方法遍历配置数组，动态生成包含随机数据的dataset对象，每次调用都会生成全新的随机数值

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