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折线图，每个数据集有不同的标签但看不出有什么不同。

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

},
]
},

Answer 2

由于一位用户的提示，我终于可以随心所欲地工作了，他将数据分为x和y两部分

Code on jsFiddle

完整的工作示例如下：jsFiddle