主页 / 问题 / 1096173
Accepted
vitek2424
Asked:2020-03-18 16:13:05 +0000 UTC2020-03-18 16:13:05 +0000 UTC

如何在 vue.js 中使用 axiosa 从数据中绘制 charjs 图

  • 772

我使用 vue.js + axios + npm + chart.js 有一个 chart.js 组件

let lineChart = Vue.component('line-chart', {
        extends: VueChartJs.Line,
        mounted () {
            this.renderChart({
                labels: [],
                datasets: [
                    {
                        label: ["Data"],
                        backgroundColor: '#f87979',
                        data: []
                    }
                ]
            }, {responsive: true, maintainAspectRatio: false})
        }

    })

还有一个标准的axios，发出get请求，接收格式为json

  [{"name":"имя",
    "index":100},
   {"name":"имя_1",
    "index":200}]

如何将请求中的所有名称添加到数组并将它们传递给chartjs组件的标签并将所有索引添加到数组并将它们传递给同一组件的 datasets-data[]？

javascript

1 个回答

  1. Best Answer

    比如这样。我们创建computed了一个属性，它将在动作之后从 getter 接收数据，并使用 watch 形成一个名称数组。（在例子中，computed属性chartData变成了只是一个属性和一个方法（initData），比如数据是怎么来的！）再进一步，我们只是使用文档！她通常会解决所有问题。一个通过改变数据在vue中生成图表的例子！

    var app = new Vue({
  el: '#app',
  data () {
    return {
      datacollection: null,
      chartData: []
    }
  },
  
  watch: {
    chartData() {
      const dataSet = [];
      this.datacollection.labels = this.chartData.reduce((res, item) => {
         res.push(item.name);
         dataSet.push(item.index);
         return res;
      }, []);
      this.datacollection.datasets[0].data = dataSet;
      console.log(this.datacollection)
    }
  },
  
  mounted() {
    this.fillData();
    this.initData();
  },
  
  methods: {
    initData() { // chartdata потом делаете просто computed свойством и возвращаете геттером данные и далее обновление графика будет автоматически! и инит удаляте он не нужен это для примера вам!
      this.chartData = [
        {
          "name":"имя",
          "index":100
        },
        {
          "name":"имя_1",
          "index":200
        }
      ];
    },
    
    fillData() {
      this.datacollection = {
          labels: [],
          datasets: [
            {
                label: ["Data"],
                backgroundColor: '#f87979',
                data: []
            }
          ]
       }
    }
  }
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <!--<line-chart :chart-data="datacollection"></line-chart>-->
</div>

    • 0

相关问题