Chart.js 未显示动态填充的数据

Question

尝试在 chart.js 中动态填充条形图时遇到了一些问题。我有两个数组，一个用于标签，一个用于价格，并且它们都已经填充了来自 firebase 的排序数据。这是我的代码：

var ctx = document.getElementById('brandChart').getContext("2d");
        
        var data = {
            labels: [],
            datasets: [{
            data: [],
            backgroundColor: [
                "#424242",
                ]
            }]
        };
        
        var options = {
            layout: {
                padding: {
                  top: 5
                }
            },
            responsive: true,
            legend: {
                display: true,
                position: 'bottom',
                // disable legend onclick remove slice
                onClick: null
            },
            animation: {
                animateScale: true,
                animateRotate: true
            },
        };
        
        var opt = {
          type: "horizontalBar",
          data: data,
          options: options
        };
        
        if (brandChart) brandChart.destroy();
        brandChart = new Chart(ctx, opt);

        // dynamically populate chart
        for(var i = 0; i < labelData.length; i++){
            brandChart.config.data.labels.push(labelData[i]);
        }
        for(var i = 0; i < priceData.length; i++){
            brandChart.config.data.datasets[0].data.push(priceData[i]);
        }
                
        brandChart.update();    

我设法将它们全部显示在条形图中，但是，结果如下：

如果类别太多，每个标签之间会出现挤压。此外，只有第一个栏的颜色和未定义的图例。任何想法如何解决这些问题？

Answer 1

ɪꜱꜱᴜᴇ #1 - ꜱᴏʟᴜᴛɪᴏɴ

在图表选项中为 y 轴刻度添加回调：

options: {
   scales: {
      yAxes: [{
         ticks: {
            callback: function(t, i) {
               if (!(i % 2)) return t;
            }
         }
      }]
   },
   ...
}

这只会显示 y 轴上的所有其他标签。

ɪꜱꜱᴜᴇ #2 - ꜱᴏʟᴜᴛɪᴏɴ

这是因为，您的 backgroundColor 数组中只有一种颜色。如果您希望每个条具有不同的颜色，则需要使用多个颜色值填充此数组。

^{编辑：从你更新的问题看来，你已经明白了。}

ɪꜱꜱᴜᴇ #3 - ꜱᴏʟᴜᴛɪᴏɴ

为您的 dataset 定义 label 属性，如下所示：

datasets: [{
   label: 'Legend Title', //<- define this
   data: [],
   backgroundColor: ["#424242", ]
}]