Как получить данные из JSON для chart.js, используя vue.js

Question

все.

Я хочу построить диаграммы из моих данных JSON, но не могу понять, как это сделать.Выборка данных («получение») и сборка таблицы.Это нормально

var ordersTable = Vue.component('orders-table', {
    template: ` 
    <div>
          <table class="table table-bordered">
          <thead>
            <tr>
              <th>orderdate</th>
              <th>cancelled</th>
              <th>reserved</th>
              <th>delivered</th>
              <th>ordersumm</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="column in orders">
              <td>{{column.orderdate}}</td>
              <td>{{column.cancelled}}</td>
              <td>{{column.reserved}}</td>
              <td>{{column.delivered}}</td>
              <td>{{column.ordersumm}}</td>
            </tr>
          </tbody>
        </table>
    </div>
        `, 

  data: function ()  {
    return {
      orders: []
    }
  },
  created:function() {
    fetch('/receive/')    
    .then(res => res.json())
    .then(res => {
      this.orders = res;
      });
  },
});

Я пытаюсь построить диаграммы с метками дат заказа и 3 наборами данных: отменено, зарезервировано, доставлено.Как это: введите описание изображения здесь Как я могу это сделать?Метки и данные должны быть заполнены с самого начала.Мой не рабочий код:

var orderChart = Vue.component('order-chart', {
  extends: VueChartJs.Bar,
  mounted () {
    this.renderChart({
      labels: [],
      datasets: [
        {
          label: 'cancelled',
          backgroundColor: 'red',
          data: []
        },
        {
          label: 'reserved',
          backgroundColor: 'blue',
          data: []
        },
        {
          label: 'delivered',
          backgroundColor: 'green',
          data: []
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})}
  ,
  data: function ()  {
    return {
      orders: []
    }
  },
  created:function() {
    fetch('/receive/')    
    .then(res => res.json())
    .then(res => {
      this.orders = res;
      });
  },
})

Answer 1

Вам нужно использовать activtiveData mixin для реализации реактивности

var orderChart = Vue.component('order-chart', {
  extends: VueChartJs.Bar,
  mixins: [VueChartJs.mixins.reactiveData]
  mounted () {
    this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
  },
  data: function ()  {
    return {
      chartData: {
        labels: [],
        datasets: [
          {
            label: 'cancelled',
            backgroundColor: 'red',
            data: []
          },
          {
            label: 'reserved',
            backgroundColor: 'blue',
            data: []
          },
          {
            label: 'delivered',
            backgroundColor: 'green',
            data: []
          }
        ]
      }
    }
  },
  created: function() {
    fetch('/receive/')    
    .then(res => res.json())
    .then(res => {
      const datasets = [
        {
          label: 'cancelled',
          backgroundColor: 'red',
          data: res.map(item => item.cancelled)
        },
        {
          label: 'reserved',
          backgroundColor: 'blue',
          data: res.map(item => item.reserved)
        },
        {
          label: 'delivered',
          backgroundColor: 'green',
          data: data: res.map(item => item.delivered)
        }
      ]
      this.chartData = {
        datasets: datasets,
        labels: res.map(item => item.orderdate)
      }
    });
  }
})

Демо: https://codepen.io/ittus/pen/MGxQqO