无法读取未定义的属性 'Concat'

Question

我正在尝试使用 charts.js 插件制作组合图表，但我希望线条位于条形图的顶部。这是我正在使用的语法，我的两个数组 linedata & bardata 都已填充，但是每当我运行这种语法时，我都会收到

的错误

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;
               }
        }]
});

编辑
这就是数组的填充方式 - 从 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

您必须在主图表选项中设置图表 type， 而不是 dataset (第二个) :

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>

无法读取未定义的属性 'Concat'

Can not read property 'Concat' of Undefined

javascript

jquery

chart.js

chart.js2

无法读取未定义的 属性 'Concat'

Can not read property 'Concat' of Undefined

javascript

jquery

chart.js

chart.js2

无法读取未定义的属性 'Concat'