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 object 中，你可以有這個：

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.ZFC35FDC70AD5FC69D23698C37A ）

處理數據更新的更好方法是在 forEach 之后將值分配給this.recentDonations ，這樣您就不會在每次推送承諾時都獲得更新： ... constdonations = []; data.pledges.forEach(d => { // 這部分工作正常。 if (d.donationAmount.= null) { const dateInEpochFormat = d.activityDate,substring(6. 16) constdonationMade = moment.unix(dateInEpochFormat).格式（'MM/DD'）捐贈：推送（{donationDate，donationMade：totalMoney.d.donationAmount}）}console.log（this.recentDonations）}）this;recentDonation =捐贈。 這;顯示=真。 ...

我使用此代碼進行了超時 function 的測試（我不知道如何使用 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 語句，圖表不會顯示任何數據