【Tableau】之URL_ACTION事件

最新推荐文章于 2022-06-13 15:56:48 发布

hotMayY

最新推荐文章于 2022-06-13 15:56:48 发布

阅读量608

点赞数

分类专栏：可视化图表工具文章标签： vue 开发工具

本文链接：https://blog.youkuaiyun.com/weixin_53594144/article/details/117566213

版权

可视化图表工具专栏收录该内容

1 篇文章

订阅专栏

本文档展示了如何在Vue项目中嵌入Tableau报表，并监听URL动作事件。通过`tableau`库，创建Viz对象并设置选项以隐藏工具栏和标签。当用户点击报表中的链接时，`urlActionEventHandler`方法会被触发，打印出链接的URL和目标标识符，从而实现对报表内链接的交互处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目中嵌入tableau可视化报表之点击报表中的链接

<template>
  <div id="vizContainer" ref="vizContainer" style="width:800px; height:700px;"></div>
</template>

<script>
  import 'tableau'
  export default {
    data() {
      return {
        viz: null
      }
    },
    create() {
      this.initViz()
    },
    methods: {
      initViz() {
        let options = {
          hideTabs: true,
          hideToolbar: true,
          disableUrlActionsPopups: true,
          onFirstInteractive: () => {
            // 添加URL_ACTION事件
            this.viz.addEventListener(
              tableau.TableauEventName.URL_ACTION,
              this.urlActionEventHandler
            )
          }
        }

        let vizContainer = document.getElementById("vizContainer")
        // let vizContainer = this.$refs.vizContainer
        let url = "https://YOUR-SERVER/views/YOUR-VISUALIZATION"
        // 或者url从后端获取

        this.viz = new tableau.Viz(vizContainer, url, options)
        // 创建一个viz对象并嵌入到div中
      },

      urlActionEventHandler(event) {
        console.log("URL: ", event.getUrl())
        // 得到url字符串
        console.log('Target: ', event.getTarget())
        // 得到一串标识符，类似这样:  _598854375796357263
      }
    }

  }
</script>