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

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

我是想使线图与Chart.js在Vue.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中设置这个Result,在this.dataSet中设置sellsdate,在this.labels中设置price。我的控制器Page like this:

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时,我得到:
未定义的
"我不知道我错在哪里"
"有人能帮忙吗"

mm9b1k5b

mm9b1k5b1#

请注意,在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了,只需提供canvasid而不是呈现上下文,就可以创建图表。

new Chart('myChart', {...

相关问题