chartjs 时间笛卡尔轴适配器和日期库设置 [英] chartjs time cartesian axis adapter and date library setup

问题描述

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

I am trying to implement this tutorial and could not get it done. https://www.chartjs.org/docs/latest/axes/cartesian/time.html

输入:具有(时间，值)属性的对象列表.Time 是 Integer，表示 unix 时间以秒为单位；值为浮点数.

Input: list of objects with (time,value) attributes. Time is Integer that means unix time in seconds; value is Float.

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

The tutorial says "Date Adapters. The time scale requires both a date library and a corresponding adapter to be present. Please choose from the available adapters".

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

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

Question 1. how to install/include the date-fns library? The documentation says "npm", but I think it is only for Node.js, but I have a Django project, Ubuntu. If I just download the zip, there is a bunch of files inside.

适配器，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>，我觉得够了.

Question 2. how to install the fns adapter? The documentation says "npm", but I have a Django project, Ubuntu. BUT, if I include <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>, I feel it is enough.

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

Question 3. after installing adapter and date library, how to fix the script below to make the plot work (Time Cartesian Axis)? I think it is all about updating line point["x"] = elem.time; to convert a unix time to some appropriate type.

HTML

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

JS

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

推荐答案

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

Installing all the 3 required libs can indeed be done using script tags, see live example underneath.

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

The reason your data doesnt show is because chart.js doesnt expect a data array in the data field. In the data field it expects an object with at least a key for all the datasets which is an array and an optional labels array, but since you are using object format for your data the labels array is not neccesarry.

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

Each dataset has its own label for the legend and in the dataset object you configure the data array in the data field. See live example:

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>

这篇关于chartjs 时间笛卡尔轴适配器和日期库设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！