Vue.js：如何从 API for Vue chart.js 检索数据答案

【问题标题】：Vue.js: How to retrieve data from API for vue chart.jsVue.js：如何从 API for Vue chart.js 检索数据
【发布时间】：2018-04-20 13:43:00
【问题描述】：

由于我没有绘制图表的经验，在我的项目中使用 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 和吸气剂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;
  },
 },
};

【问题讨论】：

标签： javascript vue.js chart.js vue-chartjs

【解决方案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: 数组是您的 X 轴。您的 datasets 对象中的 data 数组是对应 X 值的 Y 值。

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

【讨论】：