ChartJS 将每月标签更改为时间/日期答案

【问题标题】：ChartJS change monthly labels as time/dateChartJS 将每月标签更改为时间/日期
【发布时间】：2018-12-10 07:04:42
【问题描述】：

index.php

  <!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
</head>
<canvas id="myChart"></canvas>
<script  src="assets/js/script-java.js"></script>
</body>
</html>

脚本-java.js

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

var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'line',

  // The data for our dataset
  data: {
      labels: ["January","Fberuary","March"],
      datasets: [{
          label: "My First dataset",
          backgroundColor: 'rgb(255, 99, 132)',
          borderColor: 'rgb(255, 99, 132)',
          data: [120, 10, 5, 2, 20, 30, 45],

      }]
  },

  // Configuration options go here
  options: {}
});

输出：

这是代码，如您所见，我的标签是每月名称，如何将其替换为时间/数据？我想要实现的就像股市图表一样，您可以在其中查看数据的日期和时间。

谢谢

编辑：我刚刚看到一个文档：https://www.chartjs.org/docs/latest/axes/cartesian/time.html

我试过了，代码脚本现在是：

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

var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'line',

  // The data for our dataset
  data: {
      datasets: [{
          label: "My First dataset",
          backgroundColor: 'rgb(255, 99, 132)',
          borderColor: 'rgb(255, 99, 132)',
          data: [120, 10, 5, 2, 20, 30, 45],

      }]

  },

  // Configuration options go here
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    displayFormats: {
                        quarter: 'MMM YYYY'
                    }
                }
            }]
        }
    }
});

但是现在什么都没有显示。

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

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

var chart = new Chart(ctx, {
type: 'line',

// The data for our dataset
data: {
    datasets: [{
        label: "My First dataset",
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        // data : [10,20]
        data: [{x: new Date(), y:15},{x: moment().add(10,'days'), y:50},
        {x : moment().add(15,'days'), y:20}],

    }]

},

// Configuration options go here
  options: {
      scales: {
          xAxes: [{
              type: 'time',
              time: {
                // unit: 'month',
                  displayFormats: {
                      quarter: 'MMM YYYY'
                  }
              }
          }]
      }
  }
});

【讨论】：

对不起，这是一个静态代码，就像我说的那样，时间/日期将基于数据的时间。
您是否指的是您获取的数据将没有日期/时间值，只有数据，并且您打算将系统日期/时间用于标签？
是的。我刚刚看到 ChartJS 有一些关于如何做到这一点的文档：chartjs.org/docs/latest/axes/cartesian/time.html，但我还是想不通
我刚刚编辑了我的问题。请查收，谢谢
你添加了 moment.js 吗？在图表js上方添加矩js。