Javascript Vue.js：如何从Vue chart.js的API检索数据

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

我需要画一张图表，显示每个月系统中活跃用户的数量。所以我需要的唯一参数是

中值

到目前为止，我的图表是这样的（我从vue chart.js的示例中获取）：

如何将

中值

值发送到图表的

数据

参数？我有action

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})
 }
};

标签：

数组是您的X轴。 数据集对象中的

data

数组是对应X值的Y值

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

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