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

Question

遵循使用 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>

当我运行下面的代码时，我只得到一个空白网页，错误提示 "Unhandled promise rejection TypeError: "google.visualization[type] 不是构造函数。

我想我需要在 google.visualization.OrgChart(); 中输入一些东西；但不确定我的代码是什么。

Answer 1

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

您需要使用 :settings 然后传入 orgchart 包以及调用 drawChart() 的回调函数。 vue-google-charts has more info on this. So does 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>

Answer 2

我一直在使用相同的 Vue 包，但在设置时遇到了问题，经过反复试验，绝大多数图表都可以按以下方式加载...

在<template>

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

类型是您提供所需图表类型的地方 (ColumnChart、LineChart、Table)。

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

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

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

How to create an organization chart using vue-google-charts

javascript

google-visualization

vue.js