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 的原始记录有几个字段。这个例子只是展示了我在 CPU 用法上的尝试。

浏览器工具显示了我期望的数据，但显然不是图表期望的数据。这是来自 chrome vue devtools 扩展

的数据视图

编辑：为确保数据实际加载，我将 {{chartdata}} 添加到我的模板中，我看到了所有内容。这是它的开始方式，数组继续所有数据数组。实际图再次仅显示前两个数据点。

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

Answer 1

终于明白了；我需要重新阅读 Chartjs 的文档。所以这里是 mounted 函数。看到我必须为每个点输入 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>

vue/chart.js 的线图应如何构建数据结构

How should data be structured for lineplots with vue/chart.js

vue.js

chart.js

vue-chartjs