[英]Populating a chartJS with data from API through axios (VueJS)
I'm having trouble inputting data into an instance of a ChartJS line-chart.我无法将数据输入到 ChartJS 折线图的实例中。 It only shows one point with the correct data but the wrong label (titled 'label'):它只显示了一个数据正确但错误的 label(标题为“标签”)的点:
The confusing part is the arrays extracted seem to be correct, here are the observers from the console log: Arrays令人困惑的部分是提取的 arrays 似乎是正确的,这里是控制台日志中的观察者: Arrays
I would appreciate the help I thought it was the syntax but after going through the ChartJS documentation I cannot find what the issue is, here is the code (I realise I called the data and filled arrays twice when I did not need to I am only doing this for testing.):我会很感激我认为这是语法的帮助,但是在浏览了 ChartJS 文档后我找不到问题所在,这是代码(我意识到我调用了数据并在不需要时填充了 arrays 两次我只是这样做是为了测试。):
<template>
<div>
<ModelNavbar/>
<line-chart v-if="loaded" :data="chartData"></line-chart>
</div>
</template>
<script>
import Vue from 'vue';
import ModelNavbar from '@/components/ModelNavbar';
export default {
name: 'charts',
props: ["items"],
components: {
ModelNavbar
},
data() {
return {
loaded: false,
chartData: '',
file: null,
spdMes: [],
perPage: 5,
fields: [ {key: 'id', label: 'ID'},
{key: 'spdMesRpm', label: 'Rotary Speed (Rev/s)'}]
}
},
async created()
{
await Vue.axios.get('http://localhost:8002/outputservice/spd/findAll')
.then((response) =>{
this.spdMes = response.data.data.items;
console.warn(this.spdMes);
});
},
async mounted() {
this.loaded = false
Vue.axios.get('http://localhost:8002/outputservice/spd/findAll')
.then((response) =>{
this.dataList = response.data.data.items;
this.chartData = {
labels: this.dataList.map(item => item.id),
datasets: [
{
label: 'Measured Speed',
data: this.dataList.map(item => item.spdMesRpm)
}
]
}
this.loaded = true
console.warn(this.chartData);
});
}
}
</script>
I am experienced with Vue 2 and the Vue CLI (Single File Components).我熟悉 Vue 2 和 Vue CLI(单文件组件)。 I did a personal project with Vue and Chart.js a couple of months ago, creating a sample bar chart and pie chart.几个月前,我用 Vue 和 Chart.js 做了一个个人项目,创建了一个示例条形图和饼图。 After reading your question, I edited my project to create a sample line chart.阅读您的问题后,我编辑了我的项目以创建示例折线图。 It is working, so I am including the components here as an example.它正在工作,所以我在这里包括组件作为示例。
chart-configurations.js图表配置.js
const sampleLineConfig = {
type: 'line',
data: {
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July'
],
datasets: [{
label: 'Sample Dataset',
data: [],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
responsive: false
}
};
export {
sampleLineConfig
}
App.vue应用程序.vue
<template>
<div id="app">
<chart-test v-if="dataReady" :chartData="lineChartData" />
</div>
</template>
<script>
import ChartTest from '@/components/ChartTest'
export default {
name: 'App',
components: {
ChartTest
},
data() {
return {
lineChartData: [65, 59, 80, 81, 56, 55, 40],
dataReady: false
}
},
methods: {
getData() {
this.dataReady = true;
}
},
mounted() {
// Simulate API call
setTimeout(this.getData(), 1000);
}
}
</script>
ChartTest.vue ChartTest.vue
<template>
<div class="chart-test">
<h3>Chart Test</h3>
<canvas id="chart-canvas" width="500" height="500" ref="chartref"></canvas>
</div>
</template>
<script>
import Chart from 'chart.js';
import { sampleLineConfig } from '@/chart-configurations.js'
export default {
data() {
return {
chartObj: null,
chartConfig: sampleLineConfig
}
},
props: {
chartData: {
type: Array,
required: true
}
},
methods: {
setChartData() {
this.chartConfig.data.datasets[0].data = this.chartData;
}
},
mounted() {
this.setChartData();
this.chartObj = new Chart(this.$refs.chartref, this.chartConfig);
},
// beforeDestroy() {
// // This necessary if canvas is reused for a new chart
// this.chartObj.destroy();
// }
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.