我是想使线图与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
中设置sells
的date
,在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
时,我得到:
未定义的
"我不知道我错在哪里"
"有人能帮忙吗"
1条答案
按热度按时间mm9b1k5b1#
请注意,在Vue.js中,只有在装载示例后才能访问
this.$refs.uniqueName
。因此,应将负责提取数据和创建图表的代码从生命周期方法
created
移至方法mounted
。更新
除此之外,您应该在
canvas
上定义id
,而不是ref
。这样就不需要
var ctx = this.$refs.myChart
了,只需提供canvas
id
而不是呈现上下文,就可以创建图表。