什么是错误无法从给定项目获取上下文？

Question

我想在 Vue.js 中用 Chart.js 制作折线图 我想根据价格和日期制作这张图表 我有这个 Html 代码：

     <div class="content">
              <section class="content">
                <div class="row">
                <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
                <canvas ref="myChart" width="532.8" height="250"></canvas>
                </div>
                 </div>
                 </section>
        </div>
     </div>

我从服务器获得了这些元素：

        "sells": [
    {
        "count": "24",
        "price": "966261",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "31",
        "price": "470588",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "8",
        "price": "314518",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "28",
        "price": "576605",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "18",
        "price": "645010",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "26",
        "price": "295104",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "37",
        "price": "303729",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "43",
        "price": "527718",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "35",
        "price": "274219",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "40",
        "price": "471393",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "68",
        "price": "415918",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "3",
        "price": "814208",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "41",
        "price": "839669",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "50",
        "price": "565025",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "21",
        "price": "498100",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "64",
        "price": "458680",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "36",
        "price": "372096",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "61",
        "price": "569098",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "64",
        "price": "519376",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "39",
        "price": "180493",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "39",
        "price": "595028",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "33",
        "price": "55917",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "26",
        "price": "332210",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "34",
        "price": "239726",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "65",
        "price": "984014",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "57",
        "price": "736582",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "57",
        "price": "272335",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "51",
        "price": "235936",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "54",
        "price": "85552",
        "date": "۹۹/۰۳/۱۰"
    },
    {
        "count": "64",
        "price": "222069",
        "date": "۹۹/۰۳/۱۰"
    }
],

我在this.sells 中设置了这个结果，在this.dataSet 中设置了sells 中的date，在this.labels 中设置了price。 我的控制器页面是这样的：

 import Chart from "chart.js";
 import Axios from  "axios";

  export default{
      data(){
         return {
            labels: [],
            dataSet: []     
       }
     },

  methods:{
      setDate() {
        for (let i = 0; i < this.sells.length; i++) {
        this.labels[i] = this.sells[i].date;
        this.dataSet[i] = this.sells[i].price;
    }
   this.createChart();

  },
    createChart() {
       var ctx = this.$refs.myChart


        console.log(ctx);//undefined
        new Chart(ctx, {
        type: "line",
        data: {
            labels: this.labels,
            datasets: [
                {
                    label: "2020 Sales",
                    data: this.dataSet,
                    borderColor: "#fff ",
                    borderWidth: "3",
                    hoverBorderColor: "#39ccaa  ",
                    backgroundColor: [
                        "#39cccc ",

                    ],
                    hoverBackgroundColor: [
                        "#f38b4a",
                        "#56d798",
                        "#ff8397",
                        "#6970d5"
                    ]

                }
            ]
        }
    });
   }

  };




 }

我从服务器获得销售并设置为this.sells

    created(){
       Axios.get('/getHomeItem').then(response => {

        if (response.status == 200) {

               this.sells = response.data.sells;

               this.setDate();

           }
        }).catch(error => {
           if (error.response) {
           alert("مشکلی پیش آمده لطفا بعدا تلاش کنید");
        }
    });

 }

当我运行此代码时，我收到此错误：

无法从给定项目获取上下文

当我想从this.$refs.myChart 得到console.log 时，我得到：

未定义

我不知道我哪里出错了？

谁能帮忙？

Answer 1

请注意，在 Vue.js 中，只有在实例挂载后才能访问 this.$refs.uniqueName。

因此，负责获取数据和创建图表的代码应该从生命周期方法created 移动到方法mounted。

mounted() {
  Axios.get('/getHomeItem').then(response => {
    ...
    this.sells = response.data.sells;
    this.setDate();
    ...
  });
};

更新

除此之外，您应该在canvas 上定义一个id 而不是ref。

<canvas id="myChart" width="532.8" height="250"></canvas>

那么你就不需要var ctx = this.$refs.myChart。然后可以通过简单地提供 canvas id 而不是呈现上下文来创建图表。

new Chart('myChart', {...