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 - ꜱᴏʟᴜᴛɪᴏɴ

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

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

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

1 个答案: