未捕获(在承诺中)TypeError:此.renderChart不是函数VueJs Chart.js

roqulrg3  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(253)

我尝试使用Chart.js和VueJs创建一个COVID19可视化站点
这是MyApp.vue,它包含API调用并将数据存储到数组中

  1. <template>
  2. <div id="app" class="container">
  3. <div class="row mt-5" v-if="PositiveCases.length > 0">
  4. <div class="col">
  5. <h2>Positives</h2>
  6. <lineChart :chartData="PositiveCases" :options="chartOptions" label="Positive" />
  7. </div>
  8. </div>
  9. </div>
  10. </template>
  11. <script>
  12. import axios from "axios";
  13. import moment from 'moment'
  14. import lineChart from "./components/lineChart.vue";
  15. export default {
  16. name: 'App',
  17. components: {
  18. lineChart
  19. },
  20. data(){
  21. return{
  22. PositiveCases : [],
  23. Deaths: [],
  24. Recoverd: [],
  25. chartOptions: {
  26. responsive: true,
  27. maintainAspectRatio: false
  28. }
  29. }
  30. },
  31. async created(){
  32. const {data} = await axios.get('https://api.covid19api.com/live/country/egypt')
  33. //console.log(data);
  34. data.forEach(d => {
  35. const date = moment(d.Date,"YYYYMMDD").format("MM/DD")
  36. const {Confirmed,Deaths,Recovered} = d
  37. this.PositiveCases.push({date, total : Confirmed})
  38. this.Deaths.push({date, total : Deaths})
  39. this.Recoverd.push({date, total : Recovered})
  40. // console.log("PositiveCases",this.PositiveCases);
  41. // console.log("Deaths",this.Deaths);
  42. // console.log("Recoverd",this.Recoverd);
  43. });
  44. }
  45. }
  46. </script>

这是我的lineChart.vue,它包含折线图代码,数据正确存储在日期和总计中

  1. <script>
  2. import {Line} from 'vue-chartjs'
  3. export default {
  4. extends: Line,
  5. props: {
  6. label:{
  7. type: String,
  8. },
  9. chartData:{
  10. type: Array,
  11. },
  12. options:{
  13. type: Object,
  14. }
  15. },
  16. mounted(){
  17. const dates = this.chartData.map(d => d.date).reverse()
  18. const totals = this.chartData.map(d => d.total).reverse()
  19. console.log("dates",dates);
  20. console.log("totals",totals);
  21. this.renderChart({
  22. labels: dates,
  23. datasets: [{
  24. label: this.label,
  25. data: totals,
  26. }],
  27. },this.options
  28. )
  29. }
  30. }
  31. </script>

控制台中的错误显示

我想知道解决方案是什么,所有数据都正确存储在两个文件中

cyvaqqii

cyvaqqii1#

您使用的是vue-chart.js的V4版本,图表创建过程已经更改,您可以在迁移指南中阅读此处。
因此,您现在必须使用实际的组件并将数据传递给它,而不是调用旧语法中的this.renderChart,如下所示:

  1. <template>
  2. <Bar :chart-data="chartData" />
  3. </template>
  4. <script>
  5. // DataPage.vue
  6. import { Bar } from 'vue-chartjs'
  7. import { Chart, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
  8. Chart.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
  9. export default {
  10. name: 'BarChart',
  11. components: { Bar },
  12. data() {
  13. return {
  14. chartData: {
  15. labels: [ 'January', 'February', 'March'],
  16. datasets: [
  17. {
  18. label: 'Data One',
  19. backgroundColor: '#f87979',
  20. data: [40, 20, 12]
  21. }
  22. ]
  23. }
  24. }
  25. }
  26. }
  27. </script>
展开查看全部

相关问题