如何在 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

如果您的目标是从数组中获取值，并使它们沿条形图的底部显示，以便每个数组值都是条形图的标签，则需要设置＜code＞数据。标签value，而不是data.dataset。标签值。

例如，此基本图表取自条形图数据结构的 Chart.js 文档，并演示如何使用月份名称数组来标记条形图。请注意，标签栏将进入“数据.标签”节点。

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],
        }
    ]
};

如果您以编程方式为每个数据点创建一个带有一个标签的数组，那么它可能看起来像这样：

js prettyprint-override">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.dataset。labelvalue做了一些不同的事情，提供了显示在图表图例中的文本，以及当您将鼠标悬停在条形图上时显示的工具提示。