【问题标题】:Grouping by month with series of epoch timestamps in Chart.js在 Chart.js 中使用一系列纪元时间戳按月分组
【发布时间】:2021-11-22 12:26:12
【问题描述】:

我有一个纪元时间戳列表,我想使用 chart.js 绘制图表。

[1432317109519, 1432318109519, 1432319109519, ...]

分组为数据给chart.js,即每次在Y轴上是一个单位:

[{
  x: 1432317109519,
  y: 1
},{
  x: 1432318109519,
  y: 1
},{
  x: 1432319109519,
  y: 1
}]

我正在尝试将每个时间戳的 chart.js 舍入到最接近的月份:

  chartOptions = {
    type: 'line',
    scales: {
      x: {
        type: 'time',
        time: {
          unit:  'month',
          round: 'month'
        }
      }
    }
  }

执行此操作时,我的所有 y 轴都是 1。我试图获得一个月内所有值的总和。我是否误解了“圆形”属性的作用?

【问题讨论】:

  • 您使用的是 v3 还是 v2?
  • "ng2-charts": "3.0.0-rc.5",其中使用了 "chart.js": "3.5.1",

标签: chart.js ng2-charts


【解决方案1】:

在 v3 中,您需要一个日期适配器,并且比例已更改,所有更改请阅读migration guide

const options = {
  type: 'line',
  data: {
    datasets: [{
      label: '# of Votes',
      data: [{
        x: 1632664467243,
        y: 5
      }, {
        x: 1611664467243,
        y: 10
      }],
      borderColor: 'pink'
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'month',
          round: 'month'
        }
      }
    }
  }
}

const ctx = document.getElementById('tt').getContext('2d');
new Chart(ctx, options);
<canvas id="tt"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

编辑:

从那一刻起适配器readme

npm install moment chartjs-adapter-moment --save
import { Chart } from 'chart.js';
import 'chartjs-adapter-moment';

new Chart()

【讨论】:

  • 使用角度“ng2-charts”,不太确定在哪里/如何添加矩适配器。深入chart.js 文档,添加适配器也不是很清楚。说需要在场,但不确定“在场”是什么意思。
  • 查看更新的答案
  • 如果没有找到日期适配器,它会给出反馈,你确定你正确地改变了你的规模吗?就像在 myt 示例中一样,使用对象而不是数组
  • 是的,我错过了规模配置中的一些内容。它抛出了我最新更新中提到的错误。
  • 从来没有真正使用过时刻适配器,只有使用 date-fns 适配器,使用 date-fns 它可以很好地给出纪元,因为它是一个时刻错误,看起来适配器本身加载得很好但是时刻不喜欢你给它的输入
猜你喜欢
  • 1970-01-01
  • 2017-10-13
  • 2021-11-25
  • 2014-05-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-01-16
  • 2012-03-30
相关资源
最近更新 更多