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

我在尝试动态填充chart.js中的条形图时遇到了一些麻烦。我有两个数组，一个用于标签，一个用于价格，两个数组都已经用来自firebase的已排序数据填充。这里是我的代码：Chart.js没有显示动态填充的数据

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

我设法显示所有他们的柱状图，然而，结果是这样的：

它是一种每个标签之间的挤压，如果有太多的类别。此外，只有第一个酒吧的颜色&图例显示未定义。任何想法如何解决这些？

感谢先进！

来源

2017-08-01 hyperfkcb

ɪꜱꜱᴜᴇ＃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", ] 
}]

来源

2017-08-01 03:52:17

感谢您的答复！但是图表中没有显示编辑部分的内容。你有什么想法，为什么这样？有些东西从数据数组中打印出来，只是没有在图表上显示出来， – hyperfkcb

你没有正确地填充'data'数组。仔细想想 –

我修改了我的代码来更新＃2，但无济于事:( – hyperfkcb

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

回答

相关问题