[英]Vue.js: How to retrieve data from API for vue chart.js
由於我沒有繪制圖表的經驗,因此對我的項目使用vue-chart.js可能不是很容易理解。
我從API收到以下數據:
reports: {
stats: {
2018-02: {
users: {
"min": 12481,
"max": 12581,
"length": 19,
"average": 12531,
"median": 12527
}
},
2018-03: {
users: {
"average": 12590,
"length": 1,
"max": 12590,
"median": 12590,
"min": 12590
}
}
}
}
我需要繪制一個圖表,顯示每個月系統中的活動用戶數量。 所以我唯一需要的參數是median
。
到目前為止,我的圖表如下所示(我從vue-chart.js示例中獲取了此圖表):
import { Line } from 'vue-chartjs';
export default {
extends: Line,
mounted () {
this.renderChart({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: [40, 39, 10, 40, 39, 80, 40]
}
]
}, {responsive: true, maintainAspectRatio: false})
}
};
如何將median
值發送到圖表的data
參數? 我有動作loadFullReport
和getter getFullReport
。 使用最后一個,我可以從您在上面看到的report
對象中檢索所有數據。
這是我的商店里的東西:
import api from '../api';
export default {
state: {
report: {
isLoaded: false,
data: {},
},
},
actions: {
loadFullReport({ commit }) {
api
.get('/reports/active', { params: { start_date: '2018-01-01', end_date: '2018-03-01' } })
.then(({ data }) => {
commit('SET_FULL_REPORT', data);
});
},
},
mutations: {
SET_FULL_REPORT(state, data) {
state.report = {
isLoaded: true,
data,
};
},
},
getters: {
getFullReport(state) {
return state.report;
},
},
};
我不太了解您的問題。 您必須轉換數據以適合chart.js的架構
但是,您可以添加多個數據集。 問題是您要達到什么目標。
import { Line } from 'vue-chartjs';
export default {
extends: Line,
mounted () {
this.renderChart({
labels: ['2018-02', '2018-03'],
datasets: [
{
label: 'umin',
backgroundColor: '#f87979',
data: [12481, 12590]
},
{
label: 'umax',
backgroundColor: '#f87979',
data: [12581, 12590]
},
{
label: 'umedian',
backgroundColor: '#f87979',
data: [12527, 12590]
}
]
}, {responsive: true, maintainAspectRatio: false})
}
};
labels:
array是您的X軸。 data
集對象中的data
數組是對應X值的Y值。
╔═════════╦════════════╦═════════════╗
║ ║ 2018-02 ║ 2018-03 ║
╠═════════╬════════════╬═════════════╣
║ umin ║ 12481 ║ 12590 ║
║ umax ║ 12581 ║ 12590 ║
║ umedian ║ 12527 ║ 12590 ║
╚═════════╩════════════╩═════════════╝
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.