我正在使用 Django REST 后端将 API 数据发送到 VueJS 前端。 我正在尝试将每日计数放入 ChartJS 图表中。
import { HorizontalBar } from '../BaseCharts'
export default {
extends: HorizontalBar,
data() {
return{
}
},
mounted () {
/* Need to write the API call for chart data here. */
this.$store.dispatch("DailyCountAction")
this.renderChart({
labels: [this.$store.state.DailyCount],
datasets: [
{
label: 'Existing Patients',
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1,
data: [4,8,2,]
},
您可以在“标签”字段中看到我有一个返回数据的 getter:
{
"Check_In_Count": "7",
"Average_Time_Spent": "3",
"Average_Wait_Time": "2",
"Cancelations": "0",
"New_Patient_Count": "4",
"Existing_Patient_Count": "3",
"Current_Cycle_Date": "2062019"
},
{
"Check_In_Count": "4",
"Average_Time_Spent": "8",
"Average_Wait_Time": "6",
"Cancelations": "0",
"New_Patient_Count": "1",
"Existing_Patient_Count": "3",
"Current_Cycle_Date": "2072019"
},
{
"Check_In_Count": "7",
"Average_Time_Spent": "3",
"Average_Wait_Time": "9",
"Cancelations": "0",
"New_Patient_Count": "0",
"Existing_Patient_Count": "7",
"Current_Cycle_Date": "2082019"
},
{
"Check_In_Count": "8",
"Average_Time_Spent": "8",
"Average_Wait_Time": "1",
"Cancelations": "0",
"New_Patient_Count": "4",
"Existing_Patient_Count": "4",
"Current_Cycle_Date": "2092019"
},
我只需要将所有 Current_Cycle_Date 值返回到进入“标签”字段的数组中。我很困惑我该如何解决这个问题。
最后标签字段应如下所示: 标签:['2092019','2082019','2072019','2062019']
我见过在 getter 中使用 MAP 的示例。到目前为止还没有任何效果。这可以使用方法中的某些逻辑来完成吗?
如有任何建议,我们将不胜感激!
最佳答案
也许你可以尝试将其作为数组返回:
const data = [{
"Check_In_Count": "7",
"Average_Time_Spent": "3",
"Average_Wait_Time": "2",
"Cancelations": "0",
"New_Patient_Count": "4",
"Existing_Patient_Count": "3",
"Current_Cycle_Date": "2062019"
},
{
"Check_In_Count": "4",
"Average_Time_Spent": "8",
"Average_Wait_Time": "6",
"Cancelations": "0",
"New_Patient_Count": "1",
"Existing_Patient_Count": "3",
"Current_Cycle_Date": "2072019"
},
{
"Check_In_Count": "7",
"Average_Time_Spent": "3",
"Average_Wait_Time": "9",
"Cancelations": "0",
"New_Patient_Count": "0",
"Existing_Patient_Count": "7",
"Current_Cycle_Date": "2082019"
},
{
"Check_In_Count": "8",
"Average_Time_Spent": "8",
"Average_Wait_Time": "1",
"Cancelations": "0",
"New_Patient_Count": "4",
"Existing_Patient_Count": "4",
"Current_Cycle_Date": "2092019"
}]
var ccd = data.map( i => i.Current_Cycle_Date )
console.log( ccd )
关于javascript - 需要 VueJS Getter 仅以数组形式返回最后一个 JSON 属性的所有值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54910992/