Задать вопрос
@FlashDok
javascript

Как нарисовать график chart.js?

Не получается отрисовать график через chart.js

Что я в целом делаю:
- получаю на orange pi данные с датчика DHT11
- записываю эти данные в data.json, до 50 "значений"

{"temperature": "25.0", "humidity": "36.0", "time": "2023-05-08 14:09:01.509578"}

Далее пытаюсь вывести их через график
<body>
    <h1>DATA</h1>
    <p><span class="icon temperature-icon"></span>Temperature: {{ temperature }} C</p>
    <p><span class="icon humidity-icon"></span>Humidity: {{ humidity }} %</p>
    <p>Last Updated: {{ current_time }}</p>
    <canvas id="myChart"></canvas>
</body>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
fetch('../data.json')
  .then(response => response.json())
  .then(data => {
    const labels = data.map(obj => obj.time);
    const tempData = data.map(obj => obj.temperature);
    const humData = data.map(obj => obj.humidity);

    const ctx = document.getElementById('myChart').getContext('2d');
    const chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: [
          {
            label: 'Temperature',
            data: tempData,
            fill: false,
            borderColor: 'rgb(255, 99, 132)',
            tension: 0.1
          },
          {
            label: 'Humidity',
            data: humData,
            fill: false,
            borderColor: 'rgb(54, 162, 235)',
            tension: 0.1
          }
        ]
      },
      options: {
        scales: {
          x: {
            type: 'time',
            time: {
              parser: 'YYYY-MM-DD HH:mm:ss.SSSSSS',
              tooltipFormat: 'll HH:mm:ss.SSS',
              unit: 'second',
              round: 'second',
              displayFormats: {
                second: 'HH:mm:ss'
              }
            },
            ticks: {
              source: 'auto'
            }
          }
        }
      }
    });
  })
  .catch(error => console.error(error));
</script>


И выходит такая ошибка в консоли браузера
(индекс):97 Error: This method is not implemented: Check that a complete date adapter is provided.
    at Tn (chart.js:19:103030)
    at Ln.formats (chart.js:19:103248)
    at No.init (chart.js:19:152863)
    at chart.js:19:92454
    at u (chart.js:13:1237)
    at On.buildOrUpdateScales (chart.js:19:92179)
    at On._updateScales (chart.js:19:94913)
    at On.update (chart.js:19:94076)
    at On.<anonymous> (chart.js:19:90448)
    at On._doResize (chart.js:13:5520)
  • Вопрос задан
  • 474 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 2
@Scream034
Новичок в разработке
Должно помочь:
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
Ответ написан
Комментировать
Комментировать
@FlashDok Автор вопроса
Получилось сделать так.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
    <script>
    fetch('../data.json')
      .then(response => response.json())
      .then(data => {
        const labels = data.map(obj => obj.time);
        const tempData = data.map(obj => obj.temperature);
        const humData = data.map(obj => obj.humidity);

        const ctx = document.getElementById('myChart').getContext('2d');
        const chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                {
                    label: 'Temperature',
                    data: tempData,
                    fill: false,
                    borderColor: 'rgb(255, 99, 132)',
                    tension: 0.1
                },
                {
                    label: 'Humidity',
                    data: humData,
                    fill: false,
                    borderColor: 'rgb(54, 162, 235)',
                    tension: 0.1
                }
                ]
            },
            options: {
                scales: {
                x: {
                    type: 'time',
                    
                    time: {
                    parser: 'yyyy-MM-dd HH:mm:ss.SSSSSS',
                    tooltipFormat: 'l\l HH:mm:ss.SSS',
                    unit: 'second',
                    round: 'second',
                    displayFormats: {
                        second: 'HH:mm:ss'
                    }
                    },
                    ticks: {
                    source: 'auto'
                    }
                }
                }
            }
        });
      })
      .catch(error => console.error(error));
    </script>
</head>
<body>
    <h1>DATA</h1>
    <p><span class="icon temperature-icon"></span>Temperature: {{ temperature }} C</p>
    <p><span class="icon humidity-icon"></span>Humidity: {{ humidity }} %</p>
    <p>Last Updated: {{ current_time }}</p>
    <canvas id="myChart"></canvas>
</body>
</html>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
500 руб./за проект
Аппликация для фильтра заказов
22 дек. 2024, в 20:40
10000 руб./за проект
Расширение для Google Chrome
22 дек. 2024, в 20:34
3000 руб./за проект
Ещё заказы