Chart.js按时间顺序显示数据 [英] Chart.js show data in chronological order

问题描述

我有一个使用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。> c.promocode） ）））。sort（）;让i = 0; const数据集= promocodes.map（pc =>（{标签：pc，数据：[]，backgroundColor：colors [i ++]}））; labels.forEach（l => {for（让pc包含促销代码）{让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，{类型： bar，数据：{标签：标签，数据集：数据集}，选项：{标度：{xAxes：[{stacked：false}]，yAxes：[{Stacked：false， ticks：{//在ticks回调中包含美元符号：function（value，index，values）{return'$'+ value;}}}]}}，工具提示：{回调：{标签：function（tooltipItems，data）{返回 $ + tooltipItems.yLabel.toString（）; }}}，响应式：true，元素：{}}}）;  

 < canvas id = promorChart>< / canvas><脚本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。

有人可以告诉我如何使其按时间顺序显示（从最旧到最新）吗？

谢谢

解决方案

您可以使用 moment.js 进行解析并帮助对日期进行排序。

  const标签= Array.from（new Set（response.map（c => c.mmyy）））。sort （（d1，d2）=> moment（d1，'MM / YY'）。diff（moment（d2，'MM / YY'））））; 
  

这将导致以下可运行的代码段。

< pre class = snippet-code-js lang-js prettyprint-override> 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）。蓝色）.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数据集= promocodes.map（pc =>（{标签：pc，数据：[]，backgroundColor：colors [i ++]}））; labels.forEach（l => {for（让pc包含促销代码）{让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，{类型： bar，数据：{标签：标签，数据集：数据集}，选项：{标度：{xAxes：[{stacked：false}]，yAxes：[{Stacked：false， ticks：{//在ticks回调中包含美元符号：function（value，index，values）{return'$'+ value;}}}]}}，工具提示：{回调：{标签：function（tooltipItems，data）{返回 $ + tooltipItems.yLabel.toString（）; }}}，响应式：true，元素：{}}}）;

 < canvas id = promorChart>< / canvas><脚本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>  

I have a chart using Chart.js but regardless of what order I put the input data it is outputted out of order, here is a fiddle:

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>

As you can see it shows 01/20 and then 12/19 when it should be in reverse order.

Can someone tell me how to make it show in chronological order (oldest to newest)?

Thank you very much.

解决方案

You can use moment.js to parse and help sorting the dates.

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

This results in the following runnable code snippet.

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>

这篇关于Chart.js按时间顺序显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！