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沒有顯示動態填充的數據

回答

相關問題