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>

如何使用vue / chart.js为线图构造数据

1 个答案: