javascript - How to create an organization chart using vue-google-charts - Stack Overflow

admin管理员组

文章数量:1434907

Followed instructions for using vue-google-charts plugin :

Want to create an organization chart :

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 {
    ponents: {
      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>

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

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

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

Want to create an organization chart : https://developers.google./chart/interactive/docs/gallery/orgchart

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 {
    ponents: {
      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>

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

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

• javascript
• vue.js
• google-visualization

Share Improve this question Follow asked Aug 29, 2019 at 6:25 RobRob 17822 silver badges99 bronze badges 2

• 1 where do you load the google charts packages? be sure to load the 'orgchart' package... – WhiteHat Commented Aug 29, 2019 at 22:30
• Thanks @WhiteHat. In <GChart /> above type="OrgChart" I added :settings="{ packages: ['orgchart'] }". Upon refresh I now see a chart but the chart rendered doesn't look right. Do I need to remove the <div> tags from my chartData array? – Rob Commented Aug 30, 2019 at 10:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.

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 {
    ponents: {
      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>

I have been using the same Vue package and having trouble setting it up, after quite a bit of trial and error, the vast majority of Charts can be loaded in the following manner...

In the <template>

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

The type is where you give the Type of Chart you want (ColumnChart, LineChart, Table).

Doing it this way means the only code you need in Vue's data() is chartData: null where you use axios to retrieve it.

I found this the method with the least extra code.

本文标签： javascriptHow to create an organization chart using vuegooglechartsStack Overflow