ChartJS 图表数据显示在console.log上,但不在页面上(使用Axios/Vue)

ua4mk5z4  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(182)

我尝试使用axios为我的图表获取数据,但我不知道如何使其显示在画布上,我可以在console.log上看到如下值
Console.log,我不太清楚发生了什么,下面是我的代码:

  1. mounted(){
  2. const ctx = document.getElementById('myChart');
  3. let myData = [];
  4. const myChart = new Chart(ctx,
  5. {
  6. type: 'line',
  7. data: {
  8. labels: [....],
  9. datasets: [{
  10. data: this.myData,
  11. backgroundColor: [ ['blue']],
  12. }] },
  13. options: {.....}
  14. });
  15. myChart;

方法是:

  1. created: function(){
  2. this.getData();} ,
  3. methods: {
  4. getData : function(){
  5. axios.get('http://localhost:3000/Chart/chartjs')
  6. .then(resp => {this.myData = resp.data
  7. console.log(resp.data); }) }
bnlyeluc

bnlyeluc1#

您的问题与VueJS的React性基本原理有关。由于您在挂载的方法中声明了一个局部变量,并试图访问 this 上的属性myData,而没有在组件中声明它,因此VueJS将不会更新UI。
从您展示代码的方式来看,我假设您使用的是带有Options API的VueJS3。
要拥有一个React式组件,你需要声明一个React式状态。这通常在mounted()方法之前完成。

  1. export default {
  2. data() {
  3. return {
  4. myData: []
  5. }
  6. },
  7. mounted() {
  8. ...

之后,在mounted和getData方法中,您需要使用this.myData.VueJS来处理React性,而不是声明myData。
另外,我注意到你试图直接访问DOM。这在VueJS中并不常见,也不推荐。你应该使用绑定来确保你的属性被正确更新。

相关问题