[来自带有Chart.js的MySQL查询的动态数据集

Question

[我正在尝试为我的Chart.js项目创建动态数据集，但遇到麻烦，这是从getpromorevenuechart.php中提取数据集的示例：

[{"mmyy":"2019-12","promocode":"promo1","amount":"2776"},{"mmyy":"2020-01","promocode":"promo1","amount":"1245"},{"mmyy":"2020-01","promocode":"promo2","amount":"179"}]

这是我当前正在使用的代码：

    function getPromoRChartData() {
    var city = document.getElementById("cityselect").value;
$.ajax({
        type: 'GET',
        url: 'getpromorevenuechart.php',
        dataType: 'json',
        data: {  city:city, },
        success: function(response) {
          //console.log (response);

          function collate(d) {
            return d.reduce(function(prev, cur, index) {
                var ret = {};
                for (var prop in cur) {
                    if (index === 0) {
                        ret[prop] = [];
                    } else {
                        ret[prop] = prev[prop];
                    }
                    ret[prop].push(cur[prop]);
                }
                return ret;
            }, {});
        }

          var reduced = collate(response);

var ctx = document.getElementById('promorChart').getContext('2d');

var chartColors = window.chartColors;
var color = Chart.helpers.color;

var fleetmChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: reduced.mmyy,
        datasets: [{
        label: reduced.promocode,
        data: reduced.amount,
    },
    options: {
        scales: {
            xAxes: [{
              stacked: false
            }],
            yAxes: [{
              stacked: false,
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, values) {
                        return '$' + value;
                    }
                }
            }]
        },
        tooltips: {
            callbacks: {
                label: function(tooltipItems, data) {
                    return "$" + tooltipItems.yLabel.toString();
                }
            }
        },
        responsive: true,
        elements: {
        }
    }
});

但是该代码未显示我想要的方式。我希望它的外观如下所示：

data: {
        labels: ["2019-12", "2020-01"],
        datasets: [{
            label: 'promo 1',
            data: [2776, 1245]
        },
        {
            label: 'promo 2',
            data: [0, 179]
        }
        ]
    },

似乎我需要为每种类型的事物创建一个，并且当不使用该促销时，我还需要为mm / yy引入一个0。我非常不确定该怎么做。有人可以给我一些指导，并协助我实现这一目标吗？

Answer 1

这里是一个代码示例，说明了如何将response转换为chart.js所需的数据（labels和datasets）。

const response = [ 
   { 
      "mmyy":"2019-12",
      "promocode":"promo1",
      "amount":"2776"
   },
   { 
      "mmyy":"2020-01",
      "promocode":"promo1",
      "amount":"1245"
   },
   { 
      "mmyy":"2020-01",
      "promocode":"promo2",
      "amount":"179"
   }
];

const labels = Array.from(new Set(response.map(c => c.mmyy))).sort();
const promocodes = Array.from(new Set(response.map(c => c.promocode))).sort();
const datasets = promocodes.map(pc => ({ label: pc, data: []}));
for (let label of labels) {    
    let data = [];
	for (let pc of promocodes) {
    	let city = response.find(c => c.mmyy == label && c.promocode == pc);
        datasets.find(ds => ds.label == pc).data.push(city ? city.amount : 0);
    }
}

console.log("labels: " + JSON.stringify(labels));
console.log("datasets: " + JSON.stringify(datasets, undefined, "  "));