未定義のプロパティ 'Concat'を読み取ることができません

Question

charts.jsプラグインを使用してコンボ・チャートを作成しようとしていますが、その行をバーの上にしたいとします。これは私が使用している構文で、両方の私の配列はlinedata & bardataが移入されますが、私はこの構文を実行するたびに、私はこれは私がutulize構文です

Uncaught TypeError: Cannot read property 'concat' of undefined
at n (Chart.min.js:11)
at t.update (Chart.min.js:11)
at t.construct (Chart.min.js:11)
at new t (Chart.min.js:12)
at trends:507

のエラーを取得する - エラーがありますか？

var ctx = document.getElementById('canvas').getContext('2d'); 
var chart = new Chart(ctx, { 
    data: { 
     labels: labelsarr, 
     datasets: [{ 
       type: 'line', 
       fill: false, 
       label: 'Line Example', 
       backgroundColor: 'rgba(255,0,0,1)', 
       borderColor: 'rgba(255,0,0,1)', 
       data: linedata 

      }, { 
       type: 'bar', 
       label: 'Bar Example', 
       backgroundColor: 'rgba(0, 129, 214, 0.8)', 
       data: bardata 
      }] 
    }, 
    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; 
       } 
     }] 
}); 

編集
これは、配列が移入されている方法です - あなたがメインのチャートオプションでチャートtypeを設定する必要がありますPHP

 var ldata = <?php echo $ldata; ?>; 
     var values = []; 
     for (var i = 0; i < ldata.length; i++) { 
      values.push(ldata[i]); 
     } 
     var bdata = <?php echo $bdata; ?>; 
     var values1 = []; 
     for (var i = 0; i < bdata.length; i++) { 
      values1.push(bdata[i]); 
     } 

Answer 1

から渡された値を、ありません内dataset（第2のもの）：

var chart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
     ... 

ここ

あなたのコードの作業バージョンです：

var labelsarr = ['A', 'B', 'C']; 
 
var linedata = [2, 5, 3]; 
 
var bardata = [4, 2, 6]; 
 

 
var ctx = document.getElementById('canvas').getContext('2d'); 
 
var chart = new Chart(ctx, { 
 
    type: 'bar', //<-- set here 
 
    data: { 
 
     labels: labelsarr, 
 
     datasets: [{ 
 
     type: 'line', 
 
     fill: false, 
 
     label: 'Line Example', 
 
     backgroundColor: 'rgba(255,0,0,1)', 
 
     borderColor: 'rgba(255,0,0,1)', 
 
     data: linedata 
 

 
     }, { 
 
     label: 'Bar Example', 
 
     backgroundColor: 'rgba(0, 129, 214, 0.8)', 
 
     data: bardata 
 
     }] 
 
    }, 
 
    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>