Chart.js：标记每个数据集答案

【问题标题】：Chart.js: Label each datasetChart.js：标记每个数据集
【发布时间】：2022-11-01 20:59:37
【问题描述】：

我一直在尝试让 chart.js 为每个数据集都有一个标签，但第一个标签位于两个数据集下方，第二个标签位于图表的空白区域。

    var powerChart = new Chart(powerCanvas,
        {
            type: 'bar',
            data:
            {
                labels: ['Volts', 'Amperes'],
                datasets:
                    [
                        {
                            label: 'Volts',     // This bar should have this label underneath itself
                            data: [24.78]       // Initial value, will be overwritten
                        },
                        {
                            label: 'Amperes',   // This bar should have this label underneath itself
                            data: [14.51]
                        }
                    ]
            },
            options:
            {
            }
        } 
    );

请参阅https://jsfiddle.net/w20c3tru/2/ 了解我尝试过的内容和一个工作示例。注意：我试图跟随 Chart.js Line-Chart with different Labels for each Dataset 但看不出有什么区别。

【问题讨论】：

请修剪您的代码，以便更容易找到您的问题。请按照以下指南创建minimal reproducible example。
代码现在被修剪到最低限度
还是一票否决？为什么？

标签： javascript chart.js

【解决方案1】：

请注意以下 cmets：

var powerChart = new Chart(powerCanvas,
    {
        type: 'bar',
        data:
        {
            labels: ['Volts', 'Amperes'],
            datasets:
                [
                    {
                        label: 'Value',       // This is actually the label that shows up when you hover over a bar
                        data: [24.78, 14.51]  // NOTE: Number of labels defined above should equal number of values here
                    },
                ]
        },
        options:
        {
        }
    }
);

【讨论】：