Chart.js：为每个数据集添加标签

Question

我一直在尝试让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，但没有看到任何区别。

- Johnny

---

请简化您的代码，以便更容易找到问题。遵循以下准则创建一个最小可重现示例。 - Community

代码现在被削减到最小。 - Johnny

Answer 1

请注意下面的评论：

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:
        {
        }
    }
);

编辑：

data:
{
    labels: ['Volts', 'Amperes'],
    datasets:
        [
            {
                data: [24.78, 14.51],  // Volts and amperes, respectively
                borderWidth: 1,
                borderColor: ['#0000e0', '#e00000'],  // Border colors for volts and amperes, respectively
    
            },
        ]
},

- Zoraiz

---

感谢您的回答。然而，这些数据集具有不同的跨度和单位，这就是为什么我想要将它们分开的原因。如果没有其他解决方案，我可能不得不重新考虑整个设置。我尝试给您的答案点赞，但我太新了，无法获得此权限。 - Johnny

你可以查看除了条形图之外的其他图表，也许它们会适合你的需求。我不知道你具体想要实现什么，但你可以尝试调整这些障碍来满足你的需求 :) - Zoraiz

实现一个图表，从我的电表获取数据并在网页上显示能量、功率、电压和电流。 - Johnny

不，根据我的原始设计，它们必须是浮点数。我对fiddle不熟悉，请详细说明“查看编辑，也许你正在寻找这样的东西？” - Johnny

我的错，我的意思是问它们是否是单个值。是的，浮点数在条形图中应该完美地工作。 - Zoraiz

Answer 2

终于，我按照一个用户的提示将数据分成了x和y两个部分，现在它能够按照我的要求正常工作了。

Code on jsFiddle

完整的工作示例在这里： jsFiddle

- Johnny