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

Posted 2023-03-25

【中文标题】什么是错误无法从给定项目获取上下文？

【英文标题】：what is error can't acquire context from the given item?

【发布时间】：2020-09-18 07:17:49

【问题描述】：

我想在 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"  ></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 时，我得到：

未定义

我不知道我哪里出错了？

谁能帮忙？

【参考方案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"  ></canvas>

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

new Chart('myChart', ...

【讨论】：

它没有用。我使用管理员。这会是个问题吗？

@Ashkan：我更新了我的答案，提出了一个希望能解决您的问题的建议。

我做到了，但我在console.log(ctx)中得到空值

@Ashkan：如果您从代码中删除var ctx = this.$refs.myChart，那么console.log(ctx) 将不再有意义。你现在有什么错误吗？

我得到canvas使用id和文档对象let ctx = document.getElementById("myChart");，我得到console.log并得到null