Chart.js - проблемы с параметрами осей - что я делаю не так?

Я относительный новичок в chart.js, и настройка параметров поставила меня в тупик...

https://codepen.io/blunoz/pen/KKgwLVb

var FV201_timestamps = [1606728594,1606728615,1606728630,1606728633,1606728654,1606728660,1606728666,1606728672,1606728675,1606728693,1606728714,1606728735,1606728753,1606728774,1606728795,1606728813,1606728834,1606728855,1606728873,1606728894,1606728915,1606728933,1606728954,1606728975,1606728993,1606729015,1606729036,1606729054,1606729075,1606729096,1606729102,1606729121,1606729142,1606729160,1606729181,1606729202,1606729220,1606729241,1606729262,1606729280,1606729301,1606729322,1606729340,1606729361,1606729382,1606729400,1606729421,1606729442,1606729460,1606729481,1606729502,1606729520,1606729541,1606729562,1606729580,1606729601,1606729622,1606729640,1606729661,1606729682,1606729700,1606729712,1606729732,1606729753,1606729774,1606729792,1606729813,1606729822,1606729842,1606729863,1606729881,1606729902,1606729923,1606729941,1606729962,1606729983,1606730001,1606730016,1606730074,1606730134,1606730194,1606730254,1606730314,1606730374,1606730434,1606730494,1606730545,1606730604];
var FV201_temps = [28.76,28.76,28.76,28.76,28.77,28.77,28.77,28.77,28.77,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.77,28.78,28.78,28.78,28.78,28.78,28.78,28.78,28.77,28.77,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.76,28.77,28.78,28.75,28.74,28.75,28.73,28.73,28.74,28.74];
    
        var FV201_ctx = document.getElementById('FV201_chart').getContext('2d');
        var FV201_cfg = {
            type: 'line',
            data: {
              labels: FV201_timestamps,
              datasets: [
                {
                  label: 'temps',
                  data: FV201_temps,
                  type: 'line',
                  fill: false
                }
              ],
              options: {
                title: {text: 'my chart', display: false},
                scales: {
                    x: {
                        type: 'time',
                        time: {
                            unit: 'second',
                            displayFormats: { second: 'hh:mm:ss' },
                            parser: function(foo) { return moment(foo,'X'); }
                        }
                    },
                    y: {
                      min: 0,
                      max: 40,
                      scaleLabel: { display: true, labelString: 'value' }
                       }
                },
              }
            }
        };
        var FV201_chart = new Chart(FV201_ctx, FV201_cfg);
        FV201_chart.update();

На всю жизнь я не могу понять, как заставить мои метки xAxis, которые представляют собой временные метки unix (секунды), отформатировать как удобочитаемое время.

Во-вторых, я не могу заставить yAxis установить минимум и максимум.

Я уверен, что это простая проблема, которую кто-то здесь сразу узнает. Я ценю помощь!

stackoverflow.com/questions/1322732/…
react_or_angluar 15.12.2020 01:12
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
68
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот код:

var FV201_ctx = document.getElementById('FV201_chart').getContext('2d');
    var FV201_cfg = {
        type: 'line',
        data: {
          labels: FV201_timestamps,
          datasets: [
            {
              label: 'temps',
              data: FV201_temps,
              type: 'line',
              fill: false
            }
          ]
         },
          options: {
            title: {text: 'my chart', display: false},
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        unit: 'second',
                        displayFormats: { second: 'hh:mm:ss' },
                        parser: function(foo) { return moment(foo,'X'); }
                    }
                }],
                yAxes: [{
                  ticks: {
                     suggestedMin: 28.5,
                     suggestedMax: 29,
                     stepSize: 0.1
                  }
              }]
            },
          }
    };
    var FV201_chart = new Chart(FV201_ctx, FV201_cfg);
    FV201_chart.update();
  1. options не должен находиться внутри data объекта.
  2. оси x и y должны быть типами массивов.

Спасибо за код, у меня работает. Я хотел, чтобы мне не приходилось много переформатировать метку времени, так как будет отображаться много диаграмм, и они будут постоянно обновляться. Я пытался заставить функцию времени работать в соответствии с chartjs.org/docs/latest/axes/cartesian/time.html и подумал, что могу просто добавить средство форматирования, но я не могу заставить это работать.

blunoz 15.12.2020 05:01

@blunoz Теперь я понимаю. Я обновил в соответствии с их документацией. Это работает для меня,

Parikshith Kedilaya M 15.12.2020 05:56

Другие вопросы по теме