Vue.js：如何从API检索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

我不太了解您的问题。 您必须转换数据以适合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       ║
╚═════════╩════════════╩═════════════╝