如何使用 Chart.js 将来自 Google Datastudio 的数据与我的自定义可视化连接起来？

Question

我想使用 Chart.js 为 Google Data Studio 编写自己的自定义数据可视化。但是如何将 Google Datastudio 中的数据连接到我自己的图表？

我正在本地开发它，所以我遵循了这里的建议：https://developers.google.com/datastudio/visualization/library-guide 但我并不完全理解它们。

我尝试了以下方法来获取数据：

 var rowData = data.tables.DEFAULT;
 var arrayOfObjects = dscc.rowData.rows.map(function(d) {
        return {
      dimID: d.dimID[0]
    };
  });

然后将其连接到我的图表配置：

new Chart(ctx, {
    type: "polarArea",
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [
        {
          // data: [12, 15, 10, 5, 2, 3],
          data: arrayOfObjects
        }
      ]
    },
    options: {}
  });

我以为我可以取回对象数组并在我的 Chart.js 数据配置中使用它，但我收到以下错误：

Uncaught TypeError: 无法读取未定义的属性 'rows' 在 drawViz (index.js:36) 在 eval (index.js:82) 等

如何将数据导入图表？（对不起我的英文不是最好的，希望我能解释的比较全面）

Answer 1

您正在查看的 Chart.js 配置似乎需要一组数字。为此，我会使用 objectTransform.

假设这个极地面积图采用 1 个指标（值）和 1 个维度（标签），并且 configIds 是（metricID 和 dimensionId），我会编写类似于:

const drawViz(data){
  const rows = data.tables.DEFAULT;
  // obtain an array of dimension values (for the labels)
  const labels = rows.map((d) => d['dimensionId'][0])
  // obtain an array of values (from the metric selected)
  const vals = rows.map((d) => d['metricId'][0])

  new Chart(ctx, {
      type: "polarArea",
      data: {
        labels: labels,
        datasets: [
          {
            data: vals
          }
        ]
      },
      options: {}
    });


}

dscc.subscribeToData(drawViz, {transform: objectTransform});

如何使用 Chart.js 将来自 Google Datastudio 的数据与我的自定义可视化连接起来？

How to connect Data from Google Datastudio with my Custom Visualization using Chart.js?

data-visualization

google-data-studio