An error occurred while loading the file. Please try again.
LiveChart.vue 1.36 KiB
<template>
    <Line :data="chartData" :options="chartOptions" ref="chartRef" />
  </template>
  
  <script setup>
  import { Line } from 'vue-chartjs'
  import {
    Chart as ChartJS,
    Title,
    Tooltip,
    Legend,
    LineElement,
    PointElement,
    LinearScale,
    CategoryScale
  } from 'chart.js'
  import { ref, reactive } from 'vue'
  
  // Chart.js Module registrieren
  ChartJS.register(Title, Tooltip, Legend, LineElement, PointElement, LinearScale, CategoryScale)
  
  // Refs und Props
  const chartRef = ref()
  const props = defineProps({
    msg: String,
  })
  
  // Chart-Daten
  const chartData = reactive({
    labels: [],
    datasets: [
      {
        label: 'co2',
        data: [],
        borderColor: 'rgb(255, 99, 132)',
        tension: 0.1
      },
      {
        label: 'humidity',
        data: [],
        borderColor: 'rgb(54, 162, 235)',
        tension: 0.1
      },
      {
        label: 'temperature',
        data: [],
        borderColor: 'rgb(255, 206, 86)',
        tension: 0.1
      }
    ]
  })
  
  // Chart-Optionen
  const chartOptions = {
    responsive: true,
    animation: false,
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
  
  // Methoden nach außen freigeben
  defineExpose({
    chartData,
    updateChart: () => chartRef.value?.chart?.update()
  })
  
  </script>
  
  <style scoped>
  </style>