Chart.js

Question

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

示例如下

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 上面的 table 是使用 foreach 循环实现的。

Answer 1

你真的应该提供更多信息。你尝试了什么，失败了什么...... 不要指望别人做你的工作，浪费他们的时间，这样你就可以小睡一个小时。 Whosebug 是针对特定问题的，而不是让其他人做别人的工作。获取 chart.js 的数据是一件微不足道的事情，您可以在关于 chart.js.

的任何其他 post 中找到

废话不多说了，只是想让你知道你以后不应该期待类似问题的答案。

您在问题中 post 编写的代码与代码笔 link 中的代码完全不同，但这可能是由于 Narendra Jadhav 的 'update'。但是，如果把我弄糊涂了，我不知道你想要什么。
你没有说明是否要更新我们的数据，所以我没有实施更新。
不知道这个随机 randomizeData() 的用例，尤其是固定长度为 7 的情况。我更改了它，但我不知道它可能与您的用例不同的原因.
我不知道您从 MySQL 获得的数据格式，所以我使用了一种可能的格式。同上，可能和你想要的不一样。
请使用 chart.js 的较新版本，而不是一年前的版本。没有重大变化，只有改进。仅更新版本就消除了一些错误，例如y 轴和图表之间奇怪的 space。

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

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

Chart.js - How to push a collection of array into dataset

javascript

laravel

chart.js2