javascript - 如何为 ChartJS 条形图中的每个条形获取不同的标签？

Question

过去几周我一直在使用 ChartJS，并且已经习惯了它，但是，我试图向条形图中的条形图添加单独的标签，但我无法弄清楚。

下面是我正在使用的代码。

var config = {
    type : 'bar',
    data : {
        datasets : [ {
            label: numberOfFailures, //This line is the problem
            data : failureData,
            backgroundColor : colours,

        } ],
        labels :  labels 
    },
    options : {
        responsive : true,
        legend : {
            position : 'bottom'
        }
    }
};

如果我将单词标签更改为标签，它们根本不会显示，但是当它说标签时，它们都会一起显示。我想要的是数组元素 1 出现在栏 1 上，等等。

Answer 1

如果您的目标是从数组中获取值并将它们显示在条形图的底部，以便每个数组值都是条形的标签，那么您需要设置 data.labels 值，而不是 data.datasets.label 值。

例如，这个基本图表取自the Chart.js documentation for bar chart data structure并演示如何使用月份名称数组来标记条形。请注意，标签栏进入 data.labels 节点。

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 1,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [65, 59, 80, 81, 56, 55, 40],
        }
    ]
};

如果您以编程方式创建一个数组，其中每个数据点都有一个标签，那么它可能如下所示:

var chartConfig = {};

for (score = 0; score < maxScore; ++score) {
    chartConfig.scoreLabels[score] = score;
    chartConfig.scoreData[score] = howManyAchievedScore(score);
}

var data = {
    labels: chartConfig.scoreLabels,
    datasets: [
        {
            label: "Number of players who achieved score",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 1,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: chartConfig.scoreData,
        }
    ]
};

您不必在单个对象内创建标签和数据值，但如果您可以将图表配置数据分组到一个对象中，以便可以使用一个参数将其从一个函数传递到另一个函数，通常会更整洁。

data.datasets.label 值执行不同的操作，提供出现在图表图例中的文本以及将鼠标悬停在条形图上时出现的工具提示中的文本。