小编Rob*_*Rob的帖子

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

遵循使用 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: …
Run Code Online (Sandbox Code Playgroud)

javascript google-visualization vue.js

3
推荐指数
1
解决办法
1022
查看次数

标签 统计

google-visualization ×1

javascript ×1

vue.js ×1