如何使用vue-google-charts创建组织结构图 [英] How to create an organization chart using vue-google-charts

问题描述

按照以下说明使用vue-google-charts插件: https://www.npmjs.com/package/vue-google-charts

Followed instructions for using vue-google-charts plugin : https://www.npmjs.com/package/vue-google-charts

要创建组织结构图: https://developers.google.com/chart/interactive/docs/gallery/orgchart

图我必须使用onChartReady()，但不确定如何使用组织结构图.

Figured I had to use onChartReady() but not sure how to do it with organization charts.

<template >
  <div class="container">
    <GChart
      type="OrgChart"
      :data="chartData"
      @ready="onChartReady"
    />
  </div>
</template>

<script>
import { GChart } from 'vue-google-charts'


  export default {
    components: {
      GChart
    },
    data () {
      return {
              // Array will be automatically processed with visualization.arrayToDataTable function
        chartData: [
          [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
           '', 'The President'],
          [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
           'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ],
        options: {allowHtml : true}
      }
    },
    methods: {
          onChartReady (chart, google) {
            var chart = new google.visualization.OrgChart();
            chart.draw(this.chartData, this.options)
          }
      }
  }

</script>

运行以下代码时，我只得到一个空白网页，并显示错误消息:未处理的承诺拒绝TypeError:"google.visualization [type]不是构造函数".

When I run the following code I just get a blank web page with an error saying "Unhandled promise rejection TypeError: "google.visualization[type] is not a constructor".

我认为我需要在google.visualization.OrgChart();中输入一些内容但不确定我从代码中得到了什么.

Think I need to enter something into google.visualization.OrgChart(); but not sure what from the code I have.

推荐答案

对其他对使用Google图表和组织结构图软件包感兴趣的人.感谢WhiteHat将我的注意力集中在Google图表包上.

To anyone else who is interested in using google charts and the organization chart package. Thanks to WhiteHat for focusing my attention on google charts packages.

您需要使用:settings然后将orgchart包与调用drawChart()的回调函数一起传递. vue-google-charts 对此有更多信息.加载库"上的Google文档也是如此.使用下面的以下代码开始使用.

You need to use :settings then pass in the orgchart package along with a callback function that calls drawChart(). vue-google-charts has more info on this. So does Google docs on Load the Libraries . Use the following code below to get started.

<template >
  <div class="container">
    <div id="tree">
    <GChart
      :settings="{ packages: ['orgchart'], callback: ()=>{this.drawChart()} }"
      type="OrgChart"
      :data="chartData"

    />
    </div>
  </div>
</template>

<script>
import { GChart } from 'vue-google-charts'


  export default {
    components: {
      GChart
    },
    data () {
      return {
              // Array will be automatically processed with visualization.arrayToDataTable function
        chartData: null
      }
    },
    methods: {
          drawChart() {
            this.chartData = new google.visualization.DataTable()
            this.chartData.addColumn('string', 'Name')
            this.chartData.addColumn('string', 'Manager')
            this.chartData.addColumn('string', 'ToolTip')

            // For each orgchart box, provide the name, manager, and tooltip to show.
            this.chartData.addRows([
              [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
              '', 'The President'],
              [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
              'Mike', 'VP'],
              ['Alice', 'Mike', ''],
              ['Bob', 'Jim', 'Bob Sponge'],
              ['Carol', 'Bob', '']
            ])

                // Create the chart.
            var chart = new google.visualization.OrgChart(document.getElementById('tree'));
            // Draw the chart, setting the allowHtml option to true for the tooltips.
            chart.draw(this.chartData, {allowHtml:true});

          }
      },

  }

</script>

<style>
  table {
      border-collapse: inherit;
      border-spacing: 0;
  }
</style>

这篇关于如何使用vue-google-charts创建组织结构图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！