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

Posted 2023-02-16

【中文标题】Chart.js 中的图例，仅显示一个标签

【英文标题】：Legends in Chart.js, shows only one label

【发布时间】：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 轴标签，位于“数据集”上方的“标签”属性中。很奇怪。不知道下一步该怎么做。我用这个更改更新了帖子。

【参考方案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',
    ];