如何在WebDataRocks报表属性中通过API获取数据？

当前使用WebDataRocks组件的代码如下：

const pivot = new WebDataRocks({
      container: "#wdr-component",
      toolbar: true,
      height: 490,
      report: {
        dataSource: 
        {
          filename: "https://cdn.webdatarocks.com/data/data.csv"
        },
        options: {
          grid: {
            title: "REPORT",
            showHeaders: false
          }
        }
      }
    });

希望用API替代CSV文件获取数据，但尝试在dataSource的data或filename字段中填入API地址时无法正常工作，示例代码如下：

dataSource: 
    {
      data: "http://localhost:8082/getUser"
    }
// 或者
dataSource: 
    {
      filename: "http://localhost:8082/getUser"
    }

仅直接在report中调用API能成功，现咨询如何正确配置以通过API获取报表数据。

WebDataRocks的dataSource配置需根据API返回的数据格式选择对应方式：

1. API返回CSV格式数据 #

若API返回标准CSV内容，直接使用filename字段即可，但需确保API响应头的Content-Type设置为text/csv，否则组件无法识别数据格式。配置示例：

const pivot = new WebDataRocks({
      container: "#wdr-component",
      toolbar: true,
      height: 490,
      report: {
        dataSource: 
        {
          filename: "http://localhost:8082/getUser"
        },
        options: {
          grid: {
            title: "REPORT",
            showHeaders: false
          }
        }
      }
    });

2. API返回JSON格式数据 #

若API返回JSON数组（每个元素为单条数据记录），需先通过异步请求获取数据，再将数据直接传入dataSource.data字段。示例代码：

// 先请求API获取数据
fetch("http://localhost:8082/getUser")
  .then(response => response.json())
  .then(data => {
    // 初始化WebDataRocks组件
    const pivot = new WebDataRocks({
      container: "#wdr-component",
      toolbar: true,
      height: 490,
      report: {
        dataSource: {
          data: data
        },
        options: {
          grid: {
            title: "REPORT",
            showHeaders: false
          }
        }
      }
    });
  })
  .catch(error => console.error("数据请求失败:", error));

注意事项 #

• 确保API不存在跨域限制，若有跨域问题，需在后端配置CORS允许组件所在域名的请求。
• 若API需要携带认证令牌等请求头，可在fetch请求中添加headers配置，再将获取到的数据传入组件。

内容的提问来源于stack exchange，提问作者Google Account