Chart.js 折线图大部分时间不显示

Question

我想显示一个图表，其中包含捐款和捐款日期。奇怪的是，图表有时会显示（约 5% 的时间），但其他 95% 的时间不会显示（见底部图片）。

我对我遇到的这个问题感到非常困惑。我想使用从 API 获得的一些数据创建折线图。我正在使用chart.js。有时它会出现，有时它不会。它与立即完成（通过查看控制台）获取 API 数据无关。所以我确信这是我使用 Chart.js 的方式的问题。

这是我的 LineChart.vue：

<script>
import { Line } from 'vue-chartjs'

export default {
  name: 'LineChart',
  extends: Line,
  props: {
    label: {
      type: String
    },
    chartData: {
      type: Array
    },
    options: {
      type: Object
    }
  },
  mounted () {
    const dates = this.chartData.map(d => d.donationDate).reverse()
    const totals = this.chartData.map(d => d.totalMoney).reverse()

    this.renderChart({
      labels: dates,
      datasets: [{
        label: this.label,
        data: totals
      }]
    },
    this.options)
  }
}
</script>

这是我的 Fundraiser.vue 代码：

<template>
  <div class="container">
    <div class="row mt-5">
      <div class="col">
        <h2>Positive</h2>
        <line-chart :chart-data=recentDonations :options=chartOptions label='Positive'>
        </line-chart>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import moment from 'moment'
import LineChart from '../components/LineChart.vue'

export default {
  name: 'Fundraiser',
  components: { LineChart },
  data () {
    return {
      recentDonations: [],
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  },
  async created () {
    const { data } = await axios({
      url: 'http://api.justgiving.com/[MY API KEY]/v1/crowdfunding/pages/[SOME-PAGE]/pledges',
      method: 'get',
      headers: {
        Accept: 'application/json'
      }
    })
    console.log(data)
    data.pledges.forEach(d => { // this part works fine.
      if (d.donationAmount != null) {
        const dateInEpochFormat = d.activityDate.substring(6, 16)
        const donationMade = moment.unix(dateInEpochFormat).format('MM/DD')
        this.recentDonations.push({ donationDate: donationMade, totalMoney: d.donationAmount })
      }
      console.log(this.recentDonations)
    })
  }
}
</script>

从下图中可以看出，数据被很好地提取（具有两个属性的对象数组：donateDate 和 totalMoney）

所以有时它会出现（非常罕见）： [][

然后我刷新页面（不触及任何代码）突然间：

有人可以帮我解开这个谜吗？

Answer 1

在收到http请求的响应后尝试渲染图形，可能使用if语句和变量flag：

<template>
  <div class="container">
    <div class="row mt-5">
      <div class="col" v-if="show">
        <h2>Positive</h2>
        <line-chart
          :chart-data="recentDonations"
          :options="chartOptions"
          label="Positive"
        >
        </line-chart>
      </div>
    </div>
  </div>
</template>

在你的 export default 对象中，你可以有这个：

export default {
  name: 'Fundraiser',
  components: { LineChart },
  data () {
    return {
      show: false,
      recentDonations: [],
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  },
  async created () {
    const { data } = await axios({
      url: 'http://api.justgiving.com/[MY API KEY]/v1/crowdfunding/pages/[SOME- 
      PAGE]/pledges',
      method: 'get',
      headers: {
        Accept: 'application/json'
      }
    })
    console.log(data)
    data.pledges.forEach(d => { // this part works fine.
      if (d.donationAmount != null) {
        const dateInEpochFormat = d.activityDate.substring(6, 16)
        const donationMade = moment.unix(dateInEpochFormat).format('MM/DD')
        this.recentDonations.push({ donationDate: donationMade, totalMoney: 
        d.donationAmount })
      }
      console.log(this.recentDonations)
    })
    this.show = true;
  }
}

这是一种解决方法，您在渲染图形之前等待数据，而不是第一次渲染图形时，它可以使用数据并显示信息。

在图表中看不到数据的原因是因为在渲染图表时没有要显示的信息，一旦您从 http 请求中获得响应，图表就没有更新，为此，您必须观看chartData 属性，并且一旦 chartData 更新，您必须调用 chart.js 更新图表方法（您可以在此处阅读更多信息：https://www.chartjs.org/docs/latest/developers/updates.html）

处理数据更新的更好方法是在 forEach 之后将值分配给this.recentDonations，这样您就不会在每次推送质押时都获得更新： ... 常量捐赠 = []; data.pledges.forEach(d => { // 这部分工作正常。 如果（d.donationAmount！= null）{ 常量 dateInEpochFormat = d.activityDate.substring(6, 16) constdonationMade = moment.unix(dateInEpochFormat).format('MM/DD') 捐款.push({ 捐款日期：donationMade，totalMoney： d.donationAmount }) } console.log(this.recentDonations) }) this.recentDonation = 捐款； 这个.show =真； ...

我用这段代码做了一个超时功能的测试（我不知道如何使用justgiving api）：

<template>
  <div class="container">
    <div class="row mt-5">
      <div class="col" v-if="show">
        <h2>Positive</h2>
        <line-chart
          :chart-data="recentDonations"
          :options="chartOptions"
          label="Positive"
        >
        </line-chart>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import moment from "moment";
import LineChart from "../components/LineChart.vue";

export default {
  name: "Fundraiser",
  components: { LineChart },
  data() {
    return {
      show: false,
      recentDonations: [],
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    };
  },
  methods: {
    request() {
      const pledges = [
        { donationDate: "11/08", donationAmount: 5 },
        { donationDate: "11/09", donationAmount: 5 },
        { donationDate: "11/10", donationAmount: 5 },
        { donationDate: "11/11", donationAmount: 5 },
        { donationDate: "11/12", donationAmount: 5 },
        { donationDate: "11/13", donationAmount: 5 },
        { donationDate: "11/14", donationAmount: 5 },
        { donationDate: "11/15", donationAmount: 5 },
        { donationDate: "11/16", donationAmount: 5 },
        { donationDate: "11/17", donationAmount: 5 },
        { donationDate: "11/18", donationAmount: 5 },
        { donationDate: "11/19", donationAmount: 5 },
        { donationDate: "11/20", donationAmount: 5 },
        { donationDate: "11/21", donationAmount: 5 },
        { donationDate: "11/22", donationAmount: 5 }
      ];
      pledges.forEach(d => {
        // this part works fine.
        // if (d.donationAmount != null) {
        // const dateInEpochFormat = d.activityDate.substring(6, 16);
        // const donationMade = moment.unix(dateInEpochFormat).format("MM/DD");
        this.recentDonations.push({
          donationDate: d.donationDate,
          totalMoney: d.donationAmount
        });
        // }
        console.log(this.recentDonations);
      });
      this.show = true;
    }
  },
  async created() {
    await setTimeout(this.request, 1000);
  }
};
</script>

如果删除 if 语句，图表不会显示任何数据