Chart.js 按时间顺序显示数据

Question

我有一个使用 Chart.js 的图表，但无论我将输入数据按什么顺序输出，它都是乱序输出的，这是一个小提琴：

const response = [ 
   { 
      "mmyy":"12/19",
      "promocode":"promo1",
      "amount":"2776"
   },
   { 
      "mmyy":"01/20",
      "promocode":"promo1",
      "amount":"1245"
   },
   { 
      "mmyy":"01/20",
      "promocode":"promo2",
      "amount":"179"
   }
];

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

const colors = [color(chartColors.red).alpha(0.5).rgbString(),
            color(chartColors.orange).alpha(0.5).rgbString(),
            color(chartColors.yellow).alpha(0.5).rgbString(),
            color(chartColors.green).alpha(0.5).rgbString(),
            color(chartColors.blue).alpha(0.5).rgbString()]; 
const labels = Array.from(new Set(response.map(c => c.mmyy))).sort();
const promocodes = Array.from(new Set(response.map(c => c.promocode))).sort();
let i = 0; 
const datasets = promocodes.map(pc => ({
  label: pc,
  data: [],
  backgroundColor: colors[i++]
}));
labels.forEach(l => {
  for (let pc of promocodes) {
    let city = response.find(c => c.mmyy == l && c.promocode == pc);
    datasets.find(ds => ds.label == pc).data.push(city ? Number(city.amount) : 0);
  }
});

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

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

var promorChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: datasets
    },

    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: {
        }
    }
});

<canvas id="promorChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>

如您所见，它显示的是 01/20，然后是 12/19，此时应该是相反的顺序。

谁能告诉我如何让它按时间顺序显示（从最旧到最新）？

非常感谢。

Answer 1

您可以使用moment.js 来解析和帮助排序日期。

const labels = Array.from(new Set(response.map(c => c.mmyy))).sort((d1, d2) => moment(d1, 'MM/YY').diff(moment(d2, 'MM/YY')));

这会产生以下可运行的代码 sn-p。

const response = [ 
   { 
      "mmyy":"12/19",
      "promocode":"promo1",
      "amount":"2776"
   },
   { 
      "mmyy":"01/20",
      "promocode":"promo1",
      "amount":"1245"
   },
   { 
      "mmyy":"01/20",
      "promocode":"promo2",
      "amount":"179"
   }
];

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

const colors = [color(chartColors.red).alpha(0.5).rgbString(),
            color(chartColors.orange).alpha(0.5).rgbString(),
            color(chartColors.yellow).alpha(0.5).rgbString(),
            color(chartColors.green).alpha(0.5).rgbString(),
            color(chartColors.blue).alpha(0.5).rgbString()]; 
const labels = Array.from(new Set(response.map(c => c.mmyy))).sort((d1, d2) => moment(d1, 'MM/YY').diff(moment(d2, 'MM/YY')));
const promocodes = Array.from(new Set(response.map(c => c.promocode))).sort();
let i = 0; 
const datasets = promocodes.map(pc => ({
  label: pc,
  data: [],
  backgroundColor: colors[i++]
}));
labels.forEach(l => {
  for (let pc of promocodes) {
    let city = response.find(c => c.mmyy == l && c.promocode == pc);
    datasets.find(ds => ds.label == pc).data.push(city ? Number(city.amount) : 0);
  }
});

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

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

var promorChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: datasets
    },

    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: {
        }
    }
});

<canvas id="promorChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>

Answer 2

您可以为此使用reverse

...
scales: {
  xAxes: [{
    stacked: false,
    reverse: true // ADD THIS LINE
  }],
  yAxes: [{
    stacked: false,
    ticks: {
      // Include a dollar sign in the ticks
      callback: function(value, index, values) {
        return '$' + value;
      }
    }
  }]
},
...