如何使用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的文档。所以现在是挂载功能。看到我必须为每个点输入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>