如何在Vue.js项目中使用Google Data Table Chart？

问题描述

在我的vuejs项目中，如何使用Google数据表图表？ Google数据表图表链接如下： https://developers.google.com/chart/interactive/docs/gallery/table

我可以用普通的javascript代码实现此图表。但是如何在vuejs代码中使用。

解决方法

您可以使用自己的组件。在这里，我举了一个简单的例子。

Vue.component('google-data-table',{
  template: `<div id='app' ref="table_div"></div>`,props: {
    columns: {
      type: Array,required: true
    },tableData: {
      type: Array,required: true
    }

  },mounted() {
    google.charts.load('current',{
      'packages': ['table']
    });
    google.charts.setOnLoadCallback(this.drawTable);
  },methods: {
    drawTable: function() {
      var data = new google.visualization.DataTable();
      this.columns.forEach(element => {
        data.addColumn(element.type,element.title);
      });
      data.addRows(this.tableData);

      var table = new google.visualization.Table(this.$refs.table_div);

      table.draw(data,{
        showRowNumber: true,width: '100%',height: '100%'
      });
    }
  }

});

new Vue({
  el: '#app',data: {
    columns: [{
        type: 'string',title: 'Name'
      },{
        type: 'number',title: 'Salary'
      },{
        type: 'boolean',title: 'Full Time Employee'
      }
    ],tableData: [
      ['Mike',{
        v: 10000,f: '$10,000'
      },true],['Jim',{
        v: 8000,f: '$8,false],['Alice',{
        v: 12500,f: '$12,500'
      },['Bob',{
        v: 7000,f: '$7,true]
    ]
  }
});

<html>

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</head>

<body>
  <div id="app">

    <google-data-table :columns='columns' :table-data='tableData' />

  </div>
</body>

</html>

google-developer-tools vue-component vue.js