Chart.js-如何将数组的集合推入数据集中 [英] Chart.js - How to push a collection of array into dataset

问题描述

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

I have been trying many ways to push the collection of array into the dataset. Anyone can help me to push an array into stacked chart based on the codepen below?

这是例子

Codepen堆积杆

JavaScript

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数据库中检索.

The issues should be the dataset with different colors and total should be the value for Y axis and there should be another collection of array date for X axis and the colors for the dataset should be different. The data for issues and total will be retrieved from Mysql database.

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

I am using laravel and the table above was achieved using foreach loop.

推荐答案

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

You really should provide more information. What have you tried, what failed... Don't expect people do your job, wasting their time so you can nap for an hour. StackOverflow is for specific questions and not for letting others do somebody else's work. And getting data for chart.js is something trivial you can find in any other post about chart.js.

足够的抱怨，只是让您知道以后不应该对此类问题给出答案.

Enough ranting, just letting you know you shouldn't expect answers in the future for questions like that.

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

1. The code you posted in your question is quite different to the one from the codepen link, but this can be due to Narendra Jadhav's 'update'. But if confused me enough so I don't know what you want.
2. You didn't stated if you want to update our data so I didn't implemented updating.
3. Don't know the use case of this random randomizeData() does, especially with the fixed length of 7. I changed it but as I don't know the reason it may be different to your use case.
4. I don't know the data format you get from MySQL so I used a possible format. Same as above, could be different to what you want.
5. Please use an newer version of chart.js and not a year old version. There are no breaking changes, only improvements. Just updating the version eliminated a few bugs, e.g. the strange space between the yAxis and the chart.

完整代码(与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-如何将数组的集合推入数据集中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！