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

Question

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

这是示例

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

这是数组的数据

问题应该是具有不同颜色的数据集，并且总计应该是 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，而不是一年前的版本。没有重大变化，只有改进。仅更新版本就消除了一些错误，例如y 轴和图表之间的奇怪空间。

完整代码(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();
});