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

我尝试使用orderdate标签和3个数据集构建图表：取消，保留，交付。像这样： enter image description here 我怎么能这样做？标签和数据必须从获取中填充。我的工作代码不正确：

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

您需要使用reactiveData mixin来实现反应性

        $fieldName = $request->get('fieldname');
        $newValue = $request->get('value');

        $page = $em->getRepository('AppBundle:Pages')->findOneBy(
            array('fieldname' =>$fieldName,'value'=>$value)
        );
        if ($page == null){
            return new JsonResponse(['message'=>'Page Not Found'],404);
        }

演示：https://codepen.io/ittus/pen/MGxQqO

如何使用vue.js从jSON获取chart.js的数据

1 个答案: