Question

我建立了一个统计页面，并尝试在X轴和Y轴上显示案例数字的1年日期（例如：2018年1月，2018年2月……）。所有这些都与Charts.js库一起使用。我尝试这样做：

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: getPreviousMonths()
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chiffre d\'affaire - année 2018'
    },
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'month'
        },
        scaleLabel: {
          display: true,
          labelString: 'Date'
        }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'value'
        }
      }]
    }
  }
});

function getPreviousMonths() {
  var months = [];

  for (i = 0; i < 12; i++) {
    var month = moment().subtract(i, 'months').format('MMMM Y');
    months.push(month);
  }
  return months.reverse();
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Answer 1

因此，经过一番尝试，我发现了可以完全根据您的需求量身定制的解决方案。

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: getPreviousMonths(),
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chiffre d\'affaire - année 2018'
    },
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'month'
        },
        scaleLabel: {
          display: true,
          labelString: 'Date'
        }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'value'
        }
      }]
    }
  }
});

function getPreviousMonths() {
  var months = [];
  months = Array.apply(0, Array(12)).map(function(_,i){return moment().month(i).toISOString()})
  return months;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>

这与您使用的函数相同，但是使用函数moment().month()，该函数返回一个月数组，并使用所需的格式对其进行格式化。（此代码段仅显示了半个月，因为它无法扩展整个页面并缩短了半个月，应该在一个完整的窗口中正常工作）

我真的不明白为什么您的代码无法正常工作，我想当您撤消订单时会发生一些事情，但是无论如何这应该工作。干杯！

===编辑===

如注释中所建议，格式已删除，并添加了功能toISOString()。这是因为以前，日期已转换为并非所有浏览器都支持的jsDate。

Charts.js显示日期1年

1 个答案: