切换仪表板过滤器后如何更新画面扩展 API 图？

Question

我正在使用 Tableau 创建仪表板。我的仪表板需要 D3 的强大功能，因此我创建了一个 Tableau Extension 来创建可视化项。下面是使用 Tableau Extensions API 功能的 JS 的骨架：

$(document).ready(function () {
  console.log('were in again'); 
  tableau.extensions.initializeAsync().then(function () {

    // To get dataSource info, first get the dashboard.
    const dashboard = tableau.extensions.dashboardContent.dashboard;
    const worksheets = dashboard.worksheets;

    let underlyingDataFetchPromises = [];
    let dataObjects = {};
    let worksheetNames = [];

    // Save Promises to Array + Add Event Listeners
    dashboard.worksheets.forEach(worksheet => {
      worksheetNames.push(worksheet.name);
      underlyingDataFetchPromises.push(worksheet.getUnderlyingDataAsync());

      // add event listener too...
      worksheet.addEventListener(tableau.TableauEventType.FilterChanged, (filterEvent) => {
        clearChart();
        drawChart(dataObjects.dataA, dataObjects.dataB);
      });
    });

    // Maps dataSource id to dataSource so we can keep track of unique dataSources.
    Promise.all(underlyingDataFetchPromises).then(fetchedData => {

      // loop over the 2 fetchedData arrays [(1) dataA, (2) dataB]
      fetchedData.forEach((dataTable, i) => {
        let data = dataTable.data;
        let columns = dataTable.columns;
        let formattedData = formatData(data, columns);
        dataObjects[worksheetNames[i]] = formattedData;
      });

      // currently requires worksheets named "dataA" and "dataB"... not flexible atm
      drawChart(dataObjects.dataA, dataObjects.dataB);
    });

  }, function (err) {
    // Something went wrong in initialization.
    console.log('Error while Initializing: ' + err.toString());
  }); 
});

cleanData() 和 drawChart() 是我自己编写的用于绘制 D3 可视化的函数，它们正在工作。我的事件处理程序“工作”了一点，因为当仪表板中的装配工发生变化时它会被正确触发。

然而，我的问题是，当从 eventListener 中调用 drawChart() 时，我的图表是用 相同的数据绘制的，而不是由过滤器被切换。我从本质上理解为什么会这样 - eventListener 没有重新获取数据，只是重新绘制图表。

然后我的问题是，如何在切换过滤器后重新获取新数据以正确重新绘制我的可视化项？而且，是否有一个函数可以返回给我过滤器名称+值，我可以使用它来改进我的扩展程序的功能？在这段代码中使用 JS 中的所有仪表板过滤器 + 值会很好。

提前感谢您对此的任何帮助！

Answer 1

以下代码刷新数据源“ABC”并重新加载工作簿-

//The following code is used to refresh the data source 
// Wrap everything in an anonymous function to avoid polluting the global namespace
function refreshMySql() {
  $(document).ready(function() {
      tableau.extensions.initializeAsync().then(function() {
          // Since dataSource info is attached to the worksheet, we will perform
          // one async call per worksheet to get every dataSource used in this
          // dashboard.  This demonstrates the use of Promise.all to combine
          // promises together and wait for each of them to resolve.
          let dataSourceFetchPromises = [];

          // Maps dataSource id to dataSource so we can keep track of unique dataSources.
          let dashboardDataSources = {};

          // To get dataSource info, first get the dashboard.
          const dashboard = tableau.extensions.dashboardContent.dashboard;

          // Then loop through each worksheet and get its dataSources, save promise for later.
          dashboard.worksheets.forEach(function(worksheet) {
              dataSourceFetchPromises.push(worksheet.getDataSourcesAsync());
          });
          Promise.all(dataSourceFetchPromises).then(function(fetchResults) {
              fetchResults.forEach(function(dataSourcesForWorksheet) {
                  dataSourcesForWorksheet.forEach(function(dataSource) {
                      if (!dashboardDataSources[dataSource.id]) { // We've already seen it, skip it.
                          dashboardDataSources[dataSource.id] = dataSource;
                          var datasourceName = dashboardDataSources[dataSource.id].name;
                          if (dashboardDataSources[dataSource.id].name == "ABC") {

                              refreshDataSource(dashboardDataSources[dataSource.id]);
                              console.log("refreshSql() was called for Datasource Name: 'ABC'");
                          }


                      }
                  });
              });
          });
      }, function(err) {
          // Something went wrong in initialization.
          console.log('Error while Initializing: ' + err.toString());
      });
  });
  // Refreshes the given dataSource.
  function refreshDataSource(dataSource) {
      dataSource.refreshAsync().then(function() {
          //alert(dataSource.name + ': Refreshed Successfully');
          console.log(dataSource.name + ': Refreshed Successfully');
      });
  }

}

GitHub Source

Tableau Writeback Source