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

尝试在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();    

var ctx=document.getElementById（'brandChart'）.getContext（“2d”）；
风险值数据={
标签：[]，
数据集：[{
数据：[]，
背景颜色：[
"#424242",
]
}]
};
变量选项={
布局：{
填充：{
排名：5
}
},
回答：是的，
图例：{
显示：对，
位置：'底部'，
//禁用图例单击删除切片
onClick:null
},
动画：{
没错，
动画片：真
},
};
变量opt={
类型：“水平条”，
数据：数据，
选项：选项
};
if（brandChart）brandChart.destroy（）；
brandChart=新图表（ctx，opt）；
//动态填充图表
对于（变量i=0；i

我设法在条形图中显示了所有这些，但结果如下：

如果类别太多，则每个标签之间会有一种挤压。此外，只有第一个栏有颜色&显示的图例未定义。有没有办法解决这些问题

提前感谢

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

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

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

这将仅显示y轴上的每隔一个标签

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

这是因为，在

backgroundColor

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

编辑：从更新后的问题来看，您已经有了想法

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

为数据集定义标签属性，如下所示：

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

数据集：[{
标签：'图例标题'，//谢谢您的回复！但是图表上没有显示编辑部分的内容。您知道为什么会这样吗？数据数组中打印了一些内容，只是图表上没有显示内容。您没有正确填充
数据
数组。请仔细想想，arr是数组w它填充了所有已排序的数据。因为之前我从firebase检索数据时，数据没有排序。在我对所有数据进行排序后，我将已排序的数据存储到arr变量中。