如何从WebDataRocks表格中获取筛选后的数据？

步骤1：监听筛选变化事件 #

WebDataRocks的reportchange事件会在报表筛选条件或数据发生变更时触发，我们可以通过它实时获取最新的筛选后数据：

webdatarocks.on("reportchange", function() {
  getFilteredData();
});

步骤2：获取筛选后的结构化数据 #

使用getData()方法直接获取已应用筛选的扁平化数据集（该格式更适配图表渲染）：

function getFilteredData() {
  webdatarocks.getData({
    flat: true, // 返回一维数组格式的筛选后数据
    success: function(filteredData) {
      // 将数据传递给图表渲染函数
      renderChart(filteredData);
    }
  });
}

步骤3：转换数据格式并渲染独立图表 #

以Chart.js为例，将WebDataRocks返回的数据转换成图表所需的标签+数据集格式：

function renderChart(filteredData) {
  // 替换为你实际的维度字段名和度量字段名
  const categoryLabels = filteredData.map(item => item["产品类别"]);
  const metricValues = filteredData.map(item => item["销售额"]);

  // 初始化并渲染图表
  const chartCtx = document.getElementById("targetChart").getContext("2d");
  new Chart(chartCtx, {
    type: "bar", // 可替换为line/pie等图表类型
    data: {
      labels: categoryLabels,
      datasets: [{
        label: "筛选后销售额",
        data: metricValues,
        backgroundColor: "rgba(75, 192, 192, 0.6)"
      }]
    }
  });
}

步骤4：页面加载时初始化数据 #

确保页面首次加载时，能获取默认筛选条件下的数据并渲染图表：

webdatarocks.on("ready", function() {
  getFilteredData();
});

关键提示 #

• getData()返回的flat: true格式数据，会把多维透视数据转换成一维对象数组，每个对象包含所有维度和度量字段，无需额外处理即可适配多数图表库。
• 如果需要自定义数据过滤逻辑，可配合getFilters()方法获取当前所有筛选规则，再对原始数据源做二次处理，但多数场景下getData()返回的结果已满足需求。

内容的提问来源于stack exchange，提问作者Jeery sum code