Chart.js圖表​​從未生成

Question

我已驗證我的數組都有24的長度 - 但出於某種原因，下面的語法不會生成我的圖表。它僅適用於帶有條形圖的一個數據集，但我試圖將其修改爲具有兩個數據集的組合條形圖。

什麼在阻止我的圖表無法顯示，因爲它不是一個數據問題......

alert(values.length); 
alert(values1.length); 
var ctx = document.getElementById('canvas').getContext('2d'); 
var chart = new Chart(ctx, { 
     datasets: [{ 
       type: 'bar', 
       labels: labelsarr, 
       label: 'Red Team', 
       backgroundColor: 'rgba(0, 129, 214, 0.8)', 
       data: [values] 
      }, { 
       type: 'line', 
       label: 'Green Team', 
       backgroundColor: 'rgba(0,129, 218, 0.8)', 
       data: [values1] 
      }, { 
      options: { 
       tooltips: { 
        callbacks: { 
         label: function (t, d) { 
          var xLabel = d.datasets[t.datasetIndex].label; 
          var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel; 
          return xLabel + ': ' + yLabel; 
         } 
        } 
       }, 
       legend: { 
        display: false, 
        position: 'top', 
       }, 
       scales: { 
        yAxes: [{ 
          ticks: { 
           beginAtZero: true, 
           callback: function (value, index, values) { 
            if (parseInt(value) >= 1000) { 
             return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
            } else { return '$' + value; } 
           } 
          } 
         }] 
       } 
      }, 
      plugins: [{ 
        beforeDraw: function (chart) { 
         var labels = chart.data.labels; 
        } 
       }] 
      } 
     ]} 
    ); 

Answer 1

幾個問題：

• 您沒有正確定義圖表類型。第一個數據集的類型應該在數據集本身之外。
• 您獨立地分配datasets陣列，而它屬於data對象（這同樣適用於labels數組）。
• 由於，values和values1已經陣列，它們不應該被使用數組方式纏繞。

這裏是你的代碼的修訂版：

var labelsarr = ['Jan', 'Feb', 'Mar']; 
 
var values = [1, 2, 3]; 
 
var values1 = [1, 2, 3]; 
 

 
// above variables are explicitly defined, since no ajax is being used 
 

 
var ctx = document.getElementById('canvas').getContext('2d'); 
 
var chart = new Chart(ctx, { 
 
    type: 'bar', 
 
    data: { 
 
     labels: labelsarr, 
 
     datasets: [{ 
 
     label: 'Red Team', 
 
     backgroundColor: 'rgba(0, 129, 214, 0.8)', 
 
     data: values 
 
     }, { 
 
     type: 'line', 
 
     label: 'Green Team', 
 
     backgroundColor: 'rgba(0,129, 218, 0.3)', 
 
     data: values1 
 
     }] 
 
    }, 
 
    options: { 
 
     tooltips: { 
 
     callbacks: { 
 
      label: function(t, d) { 
 
       var xLabel = d.datasets[t.datasetIndex].label; 
 
       var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel; 
 
       return xLabel + ': ' + yLabel; 
 
      } 
 
     } 
 
     }, 
 
     legend: { 
 
     display: false, 
 
     position: 'top', 
 
     }, 
 
     scales: { 
 
     yAxes: [{ 
 
      ticks: { 
 
       beginAtZero: true, 
 
       callback: function(value, index, values) { 
 
        if (parseInt(value) >= 1000) { 
 
        return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
 
        } else { 
 
        return '$' + value; 
 
        } 
 
       } 
 
      } 
 
     }] 
 
     } 
 
    }, 
 
    plugins: [{ 
 
     beforeDraw: function(chart) { 
 
     var labels = chart.data.labels; 
 
     } 
 
    }] 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<canvas id="canvas"></canvas>

Answer 2

指的文件在這裏http://www.chartjs.org/docs/latest/

1圖表可以是線條或條形兩者都已指定

它應該是這個樣子只是rearrage你的代碼，並嘗試應該可以正常

var ctx = document.getElementById("myChart").getContext('2d'); 
var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
     datasets: [{ 
      label: '# of Votes', 
      data: [12, 19, 3, 5, 2, 3], 
      backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
       'rgba(54, 162, 235, 0.2)', 
       'rgba(255, 206, 86, 0.2)', 
       'rgba(75, 192, 192, 0.2)', 
       'rgba(153, 102, 255, 0.2)', 
       'rgba(255, 159, 64, 0.2)' 
      ], 
      borderColor: [ 
       'rgba(255,99,132,1)', 
       'rgba(54, 162, 235, 1)', 
       'rgba(255, 206, 86, 1)', 
       'rgba(75, 192, 192, 1)', 
       'rgba(153, 102, 255, 1)', 
       'rgba(255, 159, 64, 1)' 
      ], 
      borderWidth: 1 
     }] 
    }, 
    options: { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    } 
});