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

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

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

mounted(){
  const ctx = document.getElementById('myChart');
  let myData = [];
 const myChart = new Chart(ctx,
   {
   type: 'line',
   data: {
   labels: [....],
    datasets: [{
        data: this.myData,
        backgroundColor: [  ['blue']],
                 }] },
      options: {.....}
           });
           myChart;

方法是:

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

bnlyeluc1#

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

export default {
    data() {
        return {
            myData: []
        }
    },
    mounted() {
    ...

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

相关问题