Chart.js - 如何将数组集合推送到数据集中

Question

我一直在尝试多种方法将数组集合推送到数据集中。 任何人都可以根据下面的codepen帮我将数组推入堆叠图表吗？

这是一个例子

Codepen stacked bar

Javascript

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

这是数组的数据

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

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

Answer 1

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

足够的咆哮，只是让您知道您不应该期望将来会得到此类问题的答案。

1. 您在问题中发布的代码与 codepen 链接中的代码完全不同，但这可能是由于 Narendra Jadhav 的“更新”。但如果让我很困惑，所以我不知道你想要什么。
2. 您没有说明是否要更新我们的数据，所以我没有实施更新。
3. 不知道这个随机的randomizeData() 的用例，尤其是固定长度为 7 的情况。我更改了它，但我不知道它可能与您的用例不同的原因。
4. 我不知道您从 MySQL 获得的数据格式，所以我使用了一种可能的格式。与上述相同，可能与您想要的不同。
5. 请使用较新版本的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();
});