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

Chart.js - How to push a collection of array into dataset(Chart.js - 如何将数组集合推送到数据集中)

本文介绍了Chart.js - 如何将数组集合推送到数据集中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

这是一个例子

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

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

解决方案

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

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

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

完整代码(同 JSBin):

var initialData = [{'条形码贴纸问题':1，'额外':1，'标签问题':2，'库存准确性':1，质量错误":1},{'条形码贴纸问题':1，'额外':1，'标签问题':2，'库存准确性':1，质量错误":3},{'条形码贴纸问题':2，'额外':2，'标签问题':1，'库存准确性':2，质量错误":3}]常量颜色 = ['红色的'，'蓝色'，'绿色']var barChartData = {标签:Object.keys(initialData[0]),数据集:[]};for (var i = 0; i < initialData.length; i++) {barChartData.datasets.push({标签:'数据集' + (i+1),背景颜色:颜色[i % colors.length]，数据:Object.values(initialData[i])})}var barChartOptions = {标题: {显示:假，text: 'Chart.js 堆积条形图'},工具提示:{模式:'索引'，相交:假},响应式:真实，秤:{x轴:[{堆叠:真实，}],y轴:[{堆叠:真实，滴答声:{精度:0}}]}}var ctx = document.getElementById('canvas').getContext('2d');window.myBar = new Chart(ctx, {类型:'酒吧'，数据:条形图数据，选项:barChartOptions});document.getElementById('randomizeData').addEventListener('click', function() {barChartData.datasets.forEach(dataset=>{变量新数据 = []for (var i = 0; i < dataset.data.length; i++) {newData.push(Math.floor(Math.random()*3)+1)}dataset.data = newData});window.myBar.update();});

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?

Here's the example

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

Here's the data for arrays

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.

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

解决方案

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.

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.
You didn't stated if you want to update our data so I didn't implemented updating.
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.
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.
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.

Complete code (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 - 如何将数组集合推送到数据集中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！