Vue.js:如何从 API 检索数据 for vue chart.js.

Question

由于我没有绘制图表的经验，因此使用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;
  },
 },
};

Answer 1

我真的不明白你的问题。您必须转换数据以适合图表的架构.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:数组是 X 轴。数据集对象中的data数组是相应 X 值的 Y 值。

╔═════════╦════════════╦═════════════╗
║         ║ 2018-02    ║ 2018-03     ║
╠═════════╬════════════╬═════════════╣
║ umin    ║ 12481      ║ 12590       ║
║ umax    ║ 12581      ║ 12590       ║
║ umedian ║ 12527      ║ 12590       ║
╚═════════╩════════════╩═════════════╝