如何使用 vue-google-charts 创建组织结构图答案

【问题标题】：How to create an organization chart using vue-google-charts如何使用 vue-google-charts 创建组织结构图
【发布时间】：2020-01-02 09:01:25
【问题描述】：

使用 vue-google-charts 插件的说明如下：https://www.npmjs.com/package/vue-google-charts

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

认为我必须使用 onChartReady() 但不知道如何使用组织结构图。

<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] 不是构造函数”。

认为我需要在 google.visualization.OrgChart() 中输入一些内容；但不确定我的代码是什么。

【问题讨论】：

你在哪里加载google charts packages？一定要加载'orgchart' 包...
谢谢@WhiteHat。在上面 type="OrgChart" 我添加了 :settings="{ packages: ['orgchart'] }"。刷新后，我现在看到一个图表，但呈现的图表看起来不正确。我需要从我的 chartData 数组中删除
标签吗？

标签： javascript vue.js google-visualization

【解决方案1】：

我一直在使用同一个Vue包，设置起来也遇到了麻烦，经过相当多的反复试验，绝大多数Charts都可以通过以下方式加载...

在<template>

<GChart
  type="Table"
  :data="chartData"
  :options="chartOptions"
  :settings="{ packages: ['bar', 'corechart', 'table'] }"
  />

类型是您提供所需图表类型的位置（ColumnChart、LineChart、Table）。

这样做意味着您在 Vue 的 data() 中需要的唯一代码是 chartData: null，您可以在其中使用 axios 来检索它。

我发现这个方法的额外代码最少。

【讨论】：

【解决方案2】：

致任何对使用谷歌图表和组织结构图包感兴趣的人。感谢 WhiteHat 将我的注意力集中在谷歌图表包上。

您需要使用 :settings 然后传入 orgchart 包以及调用 drawChart() 的回调函数。 vue-google-charts 对此有更多信息。 Google docs on Load the Libraries 也是如此。使用下面的代码开始。

<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>

【讨论】：