Как следует структурировать данные для линейных графиков с помощью vue / chart.js

Question

Я извлекаю данные из API (работающий) и генерирую линейный график с vue-chartjs.

Однако только первые две точки построены.Мои данные должны быть структурированы неправильно, но я не знаю, чего они ожидают.Вот мой компонент:

import { Line } from "vue-chartjs";

export default {
  extends: Line,
  props: {
    chartdata: {
      type: Object,
      default: null
    }
  },
  mounted() {
    this.renderChart(this.chartdata);
  }
};

И в моем файле App.vue у меня есть этот простой шаблон:

<template>
  <div id="app">
    <div class="container">
      <div class="Chart">
        <h2>LineChart</h2>
        <line-chart v-if="loaded" :chartdata="chartdata"></line-chart>
      </div>
    </div>
  </div>
</template>

и этот скрипт:

<script>
import LineChart from './components/LineChart.js'
export default {
  name: 'app',
  components: { LineChart },
  data:() => ({
    loaded: false,
    chartdata: null
  }),
  async mounted () {
    this.loaded = false;
    try {
      let mydata = await fetch("http://myserver00/api/load/myserver02")
      .then(stream => stream.json())
      .then(mydata => {
        let usercpu = [];
        mydata.forEach(record => {
          usercpu.push( record.cpu.user );
        });
        this.usercpu = usercpu;
      });
    } catch (e) {
      console.error(e)
    }
    this.loaded = true;
    this.chartdata = {
      datasets: [
        {label: 'CPU', data: this.usercpu}
        ]
      };
  }
}
</script>

Как вы можете заметить, я пытаюсь использовать системные данные из psutils для мониторинга серверов.Исходная запись из API имеет несколько полей.Этот пример просто показывает мою попытку использования ЦП.

Инструменты браузера показывают ожидаемые данные, но, очевидно, не то, что ожидает график.Вот представление данных из расширения Chrome Vue Devtools

Редактировать: чтобы убедиться, что данные действительно загружены, я добавил {{chartdata}} в мой шаблон, и я вижу все это.Вот как это начинается, массив продолжается со всеми массивом данных.И фактический график снова показывает только первые две точки данных.

{ "datasets": [ { "label": "CPU", "data": [ 2.7, 2.9, 3

Answer 1

наконец получил его; Мне нужно было перечитать документ для Chartjs. Итак, вот теперь смонтированная функция. Смотрите, что я должен был ввести значения x и y для каждой точки.

async mounted () {
  this.loaded = false;
  try {
    let usercpu = [];
    await fetch("http://server/api/load/server02")
    .then(stream => stream.json())
    .then(mydata => { mydata.forEach(record => { 
      usercpu.push( { y: record.cpu.user, x: record.date });});});
    this.loaded = true;
    this.chartdata = { 
      datasets: [ {
        fill: false, 
        pointRadius: 0, 
        borderWidth: 2,
        label: 'CPU', 
        data: usercpu 
        } ] };
  } catch (e) {
    console.error(e)
  }
}

Кроме того, в части данных функции по умолчанию мне пришлось добавить оси. Я не совсем уверен, почему, но даже когда данные были в порядке (выше), я все еще не мог видеть сюжет. Поэтому, когда я добавил оси, там все было:

options: {
    scales: {
        xAxes: [{
            type: 'time',
            time: {
                  unit: "hour",
                  displayFormats: {
                    hour: "M/DD @ hA"
                  },
                  tooltipFormat: "MMM. DD @ hA"
                },
                scaleLabel: {
                  display: true,
                  labelString: "Date/Time"
                },
            ticks: { autoSkip: true, maxTicksLimit: 5},
            position: 'bottom'
        }],
        yAxes: [{
            ticks: {
                suggestedMin: 0,
                suggestedMax: 10
            }
        }]
    } 

И, конечно, мне пришлось включить опции в директиву:

    <template>
    <div id="app">
        <div class="container">
        <div id="cpu">
        <h2>Server02</h2>
        <line-chart v-if="loaded"  :chartdata="chartdata" :options="options"></line-chart>
        </div>
        </div>
    </div>
    </template>