javascript - 如何使用 vue.js 从 JSON 中获取 chart.js 的数据

Question

全部。

我想从我的 JSON 数据构建图表，但不明白怎么做。数据获取（'receive'），并建立表。没关系

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

我尝试使用 orderdate 标签和 3 个数据集构建图表：已取消、已保留、已交付。像这样： 在此处输入图像描述 我该怎么做？标签和数据必须从 fetch 中填充。我不工作的代码：

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

标签： javascriptwebvue.jschart.jsfrontend

Answer 1

您需要使用reactiveData 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