chartjs 时间笛卡尔轴适配器和日期库设置答案

【问题标题】：chartjs time cartesian axis adapter and date library setupchartjs 时间笛卡尔轴适配器和日期库设置
【发布时间】：2021-11-18 22:31:48
【问题描述】：

我正在尝试实施本教程，但无法完成。 https://www.chartjs.org/docs/latest/axes/cartesian/time.html

输入：具有（时间，值）属性的对象列表。 Time 是 Integer，表示 unix 时间以秒为单位；值为浮点数。

教程说“日期适配器。时间刻度需要同时存在日期库和相应的适配器。请从可用的适配器中进行选择”。

日期库，date-fns：https://github.com/date-fns/date-fns

问题 1. 如何安装/包含 date-fns 库？文档说“npm”，但我认为它仅适用于 Node.js，但我有一个 Django 项目，Ubuntu。如果我只是下载 zip，里面有一堆文件。

适配器，chartjs-adapter-date-fns https://github.com/chartjs/chartjs-adapter-date-fns.

问题2.如何安装fns适配器？文档说“npm”，但我有一个 Django 项目，Ubuntu。但是，如果我包含<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>，我觉得就足够了。

问题3.安装适配器和日期库后，如何修复下面的脚本以使情节正常（时间笛卡尔轴）？我认为这完全是关于更新行 point["x"] = elem.time; 以将 unix 时间转换为某种适当的类型。

HTML

<canvas id="myChart"></canvas>

   let points = [];
    for(let elem of objs) {
        point = {};
        point["x"] = elem.time;
        point["y"] = elem.value;
        points.push(point);
    }

    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: points,

        // Configuration options go here
        options: {
            responsive: false,

            scales: {
            x: {
                type: 'time',
            }
        }
        }
    });

【问题讨论】：

标签： javascript html chart.js date-fns

【解决方案1】：

确实可以使用脚本标签来安装所有 3 个必需的库，请参阅下面的实时示例。

您的数据未显示的原因是因为 chart.js 不希望数据字段中有数据数组。在数据字段中，它需要一个对象，该对象至少具有所有 datasets 的键，这是一个数组和一个可选的标签数组，但由于您对数据使用对象格式，因此标签数组不是必需的。

每个数据集都有自己的图例标签，在数据集对象中，您可以在数据字段中配置数据数组。查看实时示例：

const options = {
  type: 'line',
  data: {
    datasets: [{
      label: '# of Votes',
      data: [{
        x: 1632664468243,
        y: 5
      }, {
        x: 1632664458143,
        y: 10
      }],
      borderColor: 'pink'
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time'
      }
    }
  }
}

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>

【讨论】：