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

2022-01-22 00:00:00 charts javascript chart.js

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

I was having some trouble when trying to dynamically populate bar chart in chart.js. I have two arrays, one for label, one for its price and both of them are already populated with the sorted data from firebase. Here is my code:

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();

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

I managed to show all of them in bar chart, however, the result as such:

如果类别太多，每个标签之间会出现挤压.此外，只有第一个条具有颜色 &显示未定义的图例.任何想法如何解决这些问题?

It is kind of squeeze between each labels if there are too many categories. Also, only the first bar has the color & the legends shown undefined. Any ideas how to solve these?

提前致谢！

推荐答案

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

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

Add a callback for y-axis ticks, in your chart options :

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

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

this will only show every other label on y-axis.

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

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

This is because, you have only one color in your backgroundColor array. If you want different color for each bar, then you need to populate this array with multiple color values.

从你更新的问题看来，你已经明白了.

as it seems form your updated question, you already kind of got the idea.

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

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

Define the label property for your dataset , like so :

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

相关文章