时间戳

首页 > 解决方案 > ChartJS 将每月标签更改为时间/日期

javascript - ChartJS 将每月标签更改为时间/日期

问题描述

索引.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'
                    }
                }
            }]
        }
    }
});

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

标签： javascriptchart.js

解决方案

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'
                  }
              }
          }]
      }
  }
});

推荐阅读