как построить график charjs с данных с axiosa в vue.js

Question

Использую 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}]

Как сделать чтобы все name с запроса сложить в массив и передать их в labels компонента chartjs и все index сложить в массив и передать их в datasets- data[] того же компонента?

Answer 1

Например так. Создаём computed свойство которое из геттера будет получать после экшена данные и формируем массив имён с помощью 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>

БЛОГ НА HUSL

как построить график charjs с данных с axiosa в vue.js

Ответы (1 шт):