javascript - Chart.js-如何将数组的集合插入数据集中

我一直在尝试许多方法来将数组的集合推入数据集中。
任何人都可以帮助我根据以下Codepen将数组推入堆叠图表中吗？

这是例子

Codepen stacked bar

Java脚本

const getData = ()=>new Array(7).fill('').map(v=>randomScalingFactor());

var barChartData = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'Dataset 1',
                backgroundColor: window.chartColors.red,
                data: getData()
            }, {
                label: 'Dataset 2',
                backgroundColor: window.chartColors.blue,
                data: getData()
            }, {
                label: 'Dataset 3',
                backgroundColor: window.chartColors.green,
                data: getData()
            }]

        };
        var ctx = document.getElementById('canvas').getContext('2d');
            window.myBar = new Chart(ctx, {
                type: 'bar',
                data: barChartData,
                options: {
                    title: {
                        display: true,
                        text: 'Chart.js Bar Chart - Stacked'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false
                    },
                    responsive: true,
                    scales: {
                        xAxes: [{
                            stacked: true,
                        }],
                        yAxes: [{
                            stacked: true
                        }]
                    }
                }
            });

        document.getElementById('randomizeData').addEventListener('click', function() {
            barChartData.datasets.forEach(dataset=>{
                dataset.data = getData();
            });
            window.myBar.update();
        });

这是数组的数据



问题应该是颜色不同的数据集，总数应该是Y轴的值，并且X轴应该有另一个数组日期集合，并且数据集的颜色应该不同。问题和总数的数据将从Mysql数据库中检索。

我正在使用laravel，并且上面的表是使用foreach循环实现的。

最佳答案

您确实应该提供更多信息。您尝试了什么，失败了...
不要指望人们会做您的工作，浪费他们的时间，这样您就可以小睡一个小时。 StackOverflow是针对特定问题的，而不是让其他人去做别人的工作。在chart.js的任何其他帖子中都可以找到获取chart.js的数据很简单。

足够多的抱怨，只是让您知道，将来您不应期望出现类似问题的答案。


您在问题中发布的代码与codepen链接中的代码完全不同，但这可能是由于Narendra Jadhav的“更新”所致。但是，如果让我感到困惑，那么我不知道你想要什么。
您没有说明是否要更新我们的数据，所以我没有实施更新。
不知道这个随机randomizeData()的用例，尤其是固定长度7的情况。我更改了它，但是由于不知道它可能与您的用例不同的原因，我对此进行了更改。
我不知道您从MySQL获得的数据格式，所以我使用了一种可能的格式。与上述相同，可能与您想要的有所不同。
请使用更新版本的chart.js，而不是旧版本。没有重大变化，只有改进。只需更新版本即可消除一些错误，例如yAxis和图表之间的奇怪空间。


完整代码（same as JSBin）：

var initialData = [
  {
    'Barcode Sticker Problem':1,
    'Extra':1,
    'Labelling Problem':2,
    'Stock Accuracy':1,
    'Wrong Quality':1
  },{
    'Barcode Sticker Problem':1,
    'Extra':1,
    'Labelling Problem':2,
    'Stock Accuracy':1,
    'Wrong Quality':3
  },
  {
    'Barcode Sticker Problem':2,
    'Extra':2,
    'Labelling Problem':1,
    'Stock Accuracy':2,
    'Wrong Quality':3
  }
]

const colors = [
  'red',
  'blue',
  'green'
]

var barChartData = {
  labels: Object.keys(initialData[0]),
  datasets: []
};

for (var i = 0; i < initialData.length; i++) {
  barChartData.datasets.push(
    {
      label: 'Dataset ' + (i+1),
      backgroundColor: colors[i % colors.length],
      data: Object.values(initialData[i])
    }
  )
}

var barChartOptions = {
  title: {
    display: false,
    text: 'Chart.js Stacked Bar Chart'
  },
  tooltips: {
    mode: 'index',
    intersect: false
  },
  responsive: true,
  scales: {
    xAxes: [{
      stacked: true,
    }],
    yAxes: [{
      stacked: true,
      ticks: {
        precision: 0
      }
    }]
  }
}

var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
  type: 'bar',
  data: barChartData,
  options: barChartOptions
});

document.getElementById('randomizeData').addEventListener('click', function() {
  barChartData.datasets.forEach(dataset=>{
    var newData = []
    for (var i = 0; i < dataset.data.length; i++) {
      newData.push(Math.floor(Math.random()*3)+1)
    }
    dataset.data = newData
  });
  window.myBar.update();
});