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", ]
}]