Chart.js 中的图例，仅显示一个标签答案

【问题标题】：Legends in Chart.js, shows only one labelChart.js 中的图例，仅显示一个标签
【发布时间】：2021-07-07 21:48:30
【问题描述】：

只是一个警告：我是 chart.js 的新手！

我有几个水平条形图，它工作正常，除了一个我无法摆脱的问题。我在 y 轴上有 5 个标签，但图表顶部的图例仅显示第一个（最顶部）条形颜色的一个小矩形，甚至不显示标签本身，然后是标签列表。我认为它会将每个标签显示在与图表颜色相同的小条旁边。

不幸的是，这是一个 Intranet 应用程序，我无法提供链接，但这是我所拥有的（数据从 ajax 调用传递到此函数）：

function drawRespChart(chartLabels, chartData) {
    var ctx = $("#rtChart");
    console.log("Labels Array: " + chartLabels);
    console.log("Data Array: " + chartData);

    if (chartRespTime)
        chartRespTime.destroy();

    var chart = {
        labels: chartLabels,
        datasets: [
            {
                label: chartLabels,
                backgroundColor: ["#c45850", "#e8c3b9", "#3cba9f", "#8e5ea2", "#3e95cd"],
                data: chartData
            }
        ]
    };

    chartRespTime = new Chart(ctx, {
        type: 'horizontalBar',
        data: chart,
        datalabels: {
            anchor: 'end',
            align: 'start',
        },
        options: {
            title: {
                display: true,
                text: 'IDC Database Response Time (mili-seconds)'
            },
            legend: {
                display: true,
                labels: {
                    fontColor: 'rgb(255, 99, 132)'
                }
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Count'
                    },
                    ticks: {
                        major: {
                            fontStyle: 'bold',
                            fontColor: '#FF0000'
                        }
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Response Time (ms)'
                    }
                }]
            },
            plugins: {
                datalabels: {
                    color: 'white',
                    display: function (context) {
                        return context.dataset.data[context.dataIndex] > 15;
                    },
                    font: {
                        weight: 'bold'
                    },
                    formatter: Math.round
                }
            },
            maintainAspectRatio: true,
            responsive: true,
            showInlineValues: true,
            centeredInllineValues: true,
            tooltipCaretSize: 0
        }
    });
}

这是我在控制台窗口中看到的：

Labels Array: 0-350,350-700,700-1000,1000-1500
Data Array: 5065,32,27,3

我看到的图例是一个矩形，与第一个条的颜色相同，然后是标签列表。

【问题讨论】：

不是这样的，如果你想要多个标签，属性标签可以像数组一样工作。标签：["0-350", "350-700", etc]，必须按照你想要显示 y 轴的方式排列。
谢谢。您是指“数据集”属性部分中的“标签”还是“选项”下的 Scales->yAxes？还是有一个完全称为“标签”的不同部分？
我的标签在一个数组中；在“数据”部分中，我有“标签：chartLabels”，它是一个数组。我只是概述了值以显示数组中的内容。
数据集：[{标签：chartLabels，背景颜色：[“#3e95cd”，“#8e5ea2”，“#3cba9f”，“#e8c3b9”，“#c45850”]，数据：chartData，} ] 我可能错了，但我记得看过一个例子，标签数组必须放在数据集中。
我做了完全相同的事情，但不断收到“chartLabels 未定义”错误；奇怪的是，chartData 没有问题。它还使用来自chartLabels 的值作为y 轴标签，位于“数据集”上方的“标签”属性中。很奇怪。不知道下一步该怎么做。我用这个更改更新了帖子。

标签： javascript jquery asp.net chart.js legend

【解决方案1】：

似乎charts.js 标签仅在您拆分数据集时才有效。

举个例子。 https://jsfiddle.net/code4mk/1j62ey38/

datasets: [ {
          label: 'Result',
          fill:false,
          data: aDatasets1,
          backgroundColor: '#E91E63',
          },
         {
          label: 'Result2',
          fill:false,
          data: aDatasets2,
          backgroundColor: '#E91E93',
    }];

【讨论】：