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值会执行不同的操作，提供显示在图表图例中以及将鼠标悬停在条形图上时显示的工具提示中的文字。

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

1 个答案: