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 对象（同样适用于 {{1} } 数组）。
• 由于 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;
      }
   }]
});

Answer 2

请参阅此处的文档http://www.chartjs.org/docs/latest/

1个图表可以是您指定了两者的行或条

它应该看起来像这样只需重新启动你的代码并尝试正常工作

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