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

【问题标题】：How to connect Data from Google Datastudio with my Custom Visualization using Chart.js?如何使用 Chart.js 将来自 Google Datastudio 的数据与我的自定义可视化连接起来？
【发布时间】：2019-05-25 05:42:47
【问题描述】：

我想使用 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 数据配置中使用它，但我收到以下错误：

未捕获的类型错误：无法读取未定义的属性“行” 在 drawViz (index.js:36) 在 eval (index.js:82) 等处。

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

【问题讨论】：

标签： data-visualization google-data-studio

【解决方案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});

【讨论】：