Chart.js 使用日期创建折线图

Question

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

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) 之后，我似乎也无法正确设置日期（他们实际上并没有给出示例）

正在使用的 HTML：

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

我只是不知道，虽然我认为这是一个相当简单的问题，任何帮助将不胜感激。

Answer 1

您必须在 dataset 内移动数据。如果您查看usage manual，则使用了datasets 数组。 time 文档中数据集的“提示” 也不是那么明显（参见标题）。

参见下面的 sn-p：

我刚刚复制了基本用法示例并插入了您第一次尝试的数据（+ 添加了几个标签）

更新 18.03.2020

我已经更新了 sn-p 以使用 Chart.js 2.8.0 并添加了以下代码，正如 @Erik 的评论中所建议的那样

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

更新 16.02.2021

正如@habib 所指出的，2.9.4 版本引发了几个错误。我猜这些是由于缺少依赖项（moment.js）引起的。见：

注意：从 v2.8 开始，Moment.js 是 Chart.js 和 Chart.min.js 的可选依赖项。为了在 Moment.js 中使用时间刻度，您需要在需要 Chart.js 之前确保 Moment.js 已完全加载。您可以使用垫片

Source

因此，我更改了以下内容：

• 将 Chart.js 更新到 2.9.4
• 添加了 moment.js (2.29.1) 作为依赖项
• 将时间格式调整为符合 ISO8601（如 soiboi 建议的那样）

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

var myChart = new Chart(ctx, {
  type: 'line',
  options: {
    scales: {
      xAxes: [{
        type: 'time',
      }]
    }
  },
  data: {
    labels: ["2015-03-15T13:03:00Z", "2015-03-25T13:02:00Z", "2015-04-25T14:12:00Z"],
    datasets: [{
      label: 'Demo',
      data: [{
          t: '2015-03-15T13:03:00Z',
          y: 12
        },
        {
          t: '2015-03-25T13:02:00Z',
          y: 21
        },
        {
          t: '2015-04-25T14:12:00Z',
          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
    }]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<div class="container">
  <canvas id="examChart"></canvas>
</div>

Answer 2

根据@RamizWachtler 的回答，您可以添加到图表的选项部分以正确扩展超时。我会注意到这似乎不适用于 Charts.js 2.3。添加了一个有效的 sn-p，它使用截至 2019 年 4 月的最新 Charts.js 版本。

此外，我已将时间格式更改为符合 ISO8601。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                distribution: 'linear'
            }]
        }
    }
});

来源 - https://www.chartjs.org/docs/latest/axes/cartesian/time.html

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

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["2015-03-15T13:03:00Z", "2015-03-25T13:02:00Z", "2015-04-25T14:12:00Z"],
    datasets: [{
      label: 'Demo',
      data: [{
          t: "2015-03-15T13:03:00Z",
          y: 12
        },
        {
          t: "2015-03-25T13:02:00Z",
          y: 21
        },
        {
          t: "2015-04-25T14:12:00Z",
          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',
        distribution: 'linear'
      }]
    }
  }
});

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

Answer 3

使用时间时，您必须使用 UTC 时间，因为添加了您的本地时间（澳大利亚 +10 小时/36000 秒），因此每个国家/地区都有不同的时区。 关键是在任何时间转换中使用 moment.utc 0 秒 = moment.utc('1970-01-01 00:00:00')

使用moment.utc('1970-01-01').add(3600, 'seconds')添加一个值，然后 从 y 轴值或工具提示项，您必须参考

callback: value => {
    date = moment.utc(value);
    if(date.diff(moment.utc('1970-01-01 23:59:59'), 'minutes') === 0) 
    {
        return null;
    };
    date.format('HH:mm:ss');
}

label: (item, data) => data.datasets[item.datasetIndex].label +" "+ 
moment.utc(data.datasets[item.datasetIndex].data[item.index]).format("HH:mm:ss")

https://lopeys.com/ironman/IMAUS_Charts_StackedTimes.htm

Answer 4

我的建议是将moment.js 库添加到您的项目中，并使用moment 格式化您的日期。另外我不确定在这里使用“t”和“y”。我会将时间添加为标签并将其与 x 数据匹配：

var data = {
  labels: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
  datasets: [
    {
        data: [12,21,32],
    }
  ]
};

var myBarChart = Chart.Line(canvas,{
data:data,
});

有一个小提琴例子here.