Tableau入门

1.tableau是一款强大的数据分析工具

2.前端通过 Tableau 的 JavaScript API将 Tableau 可视化项整合到自己的 Web 应用页面中。

3.Tableau JavaScript API 的要求和入门使用

Ⅰ.要使用 Tableau JavaScript API 进行编程，需要能够访问 Tableau Server、Tableau Online 或 Tableau Public 和该服务器上的已发布工作簿。自己的web应用页面不与该服务器位于同一计算机上，但需要能够访问该服务器.

Ⅱ.兼容性: 浏览器是 Chrome、Firefox、Safari 3.2.1 和更高版本以及 Internet Explorer 8.0 和更高版本。如果使用的是 Internet Explorer 8.0，则必须禁用兼容性模式。另外，浏览器必须配置为允许在 JavaScript 代码中使用 window.postMessage 方法，一些安全包会禁用此功能。

Ⅲ.入门使用

<!DOCTYPE html>
<html>

<head>
    <title>Basic Embed</title>
    <!-- 导入tableau的js包 -->
    <script src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
   
</head>

<body onload="creatView();">
    <!-- 创建要插入Tableau可视化的元素 -->
    <div id="Container" style="width:800px; height:700px;"></div>


    <script type="text/javascript">
        //页面加载后调用
        function creatView() {
            // 获取可视化元素,用于嵌入Tableau模块
            var containerDiv = document.getElementById("Container"),

            //url请求的接口地址(指定 Tableau 服务器的名称)
            url = "http://public.tableau.com/views/RegionalSampleWorkbook/Storms",
            // url = "https://public.tableau.com/views/WorldIndicators/GDPpercapita";

            //配置选项
            options = {
                    //隐藏tab栏
                    hideTabs: true,
                    //加载后执行的回调函数
                    onFirstInteractive: function () {
                        console.log("Run this code when the viz has finished loading.");
                    },
                    //offsetWidth/offsetHeight  获取的是盒子的真实宽高（width/height+border+padding）

                    //设置图表模块和容器等宽
                    width:containerDiv.offsetWidth,
                    //设置图标模块和容器等高
                    height:containerDiv.offsetHeight
                };
            // 实例化一个Talleau视图对象,并传入上述三个参数
            var view = new tableau.Viz(containerDiv, url, options);
        }
    </script>
</body>

</html>

本文同步发表在我的个人博客：https://www.lubaojun.com/