Chart.js使用日期创建折线图 [英] Chart.js creating a line graph using dates

问题描述

我似乎无法让Chart.js处理日期。我尝试了很多不同的方法：

I can't seem to get Chart.js to work with dates. I have tried quite a few different methods:

let examChart = document.getElementById("examChart").getContext("2d");
let examLineChart = new Chart(examChart, {
    type: "line",
    data: [
            { t: new Date("2015-3-15 13:3"), y: 12 },
            { t: new Date("2015-3-25 13:2"), y: 21 },
            { t: new Date("2015-4-25 14:12"), y: 32 }
    ],
    options: {
        label: "placeholder"
    }
});

并且：

let examChart = document.getElementById("examChart").getContext("2d");
let examLineChart = new Chart(examChart, {
    type: "line",
    data: [
            { t: "2015-3-15 13:3", y: 12 },
            { t: "2015-3-25 13:2", y: 21 },
            { t: "2015-4-25 14:12", y: 32 }
    ],
    options: {
        label: "placeholder"    
    }
});

并且：

let examChart = document.getElementById("examChart").getContext("2d");
let examLineChart = new Chart(examChart, {
    type: "line",
    data: [
            { t: "Sun Mar 15 2015 12:03:45 GMT+0000 (GMT Standard Time)", y: 12 },
            { t: "Wed Mar 25 2015 12:02:15 GMT+0000 (GMT Standard Time)", y: 21 },
            { t: "Sat Apr 25 2015 13:12:30 GMT+0100 (GMT Daylight Time)", y: 32 }
    ],
    options: {
        label: "placeholder"    
    }
});

为了涵盖我的一些尝试，我似乎无法了解如何设置日期即使阅读了文档，也可以正确地进行操作（ http://www.chartjs.org/ docs / latest / axes / cartesian / time.html ）（实际上并没有给出示例）

To cover just a few of my attempts, I just can't seem to get how to set dates properly even after reading the documentation (http://www.chartjs.org/docs/latest/axes/cartesian/time.html) (they don't actually give an example)

正在使用的HTML：

<div class="container">
    <canvas id="examChart"></canvas>
</div>

我只是不知道，尽管我认为这是一个非常简单的问题，但任何帮助都会很大

I just have no idea, although I imagine this is a rather simple problem, any help would be greatly appreciated.

推荐答案

您必须在数据集中移动数据。如果您查看使用手册，则是<$使用c $ c> datasets 数组。 提示 noreferrer>时间也不太明显（请参见标题）。

You have to move your data within a dataset. If you take a look at the usage manual, a datasets array is used. The "hint" for datasets within the docs for time is also not that obvious (See headline).

请参见以下摘录：

我只是复制了基本用法示例，并从您的第一次尝试中插入了数据（+添加了一些标签）

I just copied the basic usage example and inserted the data from your first attempt (+ added few labels)

更新18.03.2020

我已经更新了代码段以使用Chart.js 2.8.0 并添加了以下代码，如 @Erik

I've updated the snippet to use Chart.js 2.8.0 and added following code, as suggested in the comment by @Erik

options: {
    scales: {
      xAxes: [{
        type: 'time'
      }]
    }
  }

var ctx = document.getElementById("examChart").getContext("2d");

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [new Date("2015-3-15 13:3").toLocaleString(), new Date("2015-3-25 13:2").toLocaleString(), new Date("2015-4-25 14:12").toLocaleString()],
    datasets: [{
      label: 'Demo',
      data: [{
          t: new Date("2015-3-15 13:3"),
          y: 12
        },
        {
          t: new Date("2015-3-25 13:2"),
          y: 21
        },
        {
          t: new Date("2015-4-25 14:12"),
          y: 32
        }
      ],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time'
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
<div class="container">
  <canvas id="examChart"></canvas>
</div>

这篇关于Chart.js使用日期创建折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！