编写可视化图表

编写可视化图表代码

Looker Studio 帮助程序库在您和 Looker 之间提供了一个接口 Studio。要使用该库，请提供一个回调函数来呈现可视化图表。

该库中最重要的函数是 subscribeToData，它使用两个参数：一个用于呈现可视化图表的 callback 函数，以及一个用于指定您希望对数据执行何种转换的 options 对象。要了解详情，请查看库参考。

您的可视化 JavaScript 可能大致如下所示。

function drawViz(vizData){
  var height = dscc.getHeight();
  var width = dscc.getWidth();
  console.log(vizData);
  // this is where you write your viz code
}

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

编写社区可视化图表时，需注意以下几个关键点。

当数据、样式或 iframe 大小发生更改时，subscribeToData 函数会进行更新。

例如：

// create and add the canvas
// do this one time
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);

function drawViz(data){
  // clear the canvas
  var ctx = canvasElement.getContext('2d');
  ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);

  // viz code goes here

}

Looker Studio 会加载并运行 JavaScript 文件，而不是 HTML。所有 DOM 操作 需要通过 JavaScript 执行

例如：以下代码定义了 div 并将其附加到 DOM。

// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);

打包代码

Looker Studio 社区可视化图表仅允许您加载一种 JavaScript 文件。已上传的代码应该是包含 dscc 帮助程序库、任何 JavaScript 可视化库以及您的可视化图表代码的单个文件。

要在 bash 中执行此操作，可以使用 cat 命令，如下所示。

cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js

定义清单

可视化图表清单文件提供有关可视化图表的元数据，以及有关可视化图表资源所在位置的信息。清单文件的位置称为“组件 ID”，用于加载社区可视化图表。

要查看示例清单，请参阅清单参考。

清单的 devMode 参数决定了可视化图表的缓存行为。在开发可视化图表时，devMode 应设为 true，以确保强制刷新会加载最新版本的资源。代码稳定后，devMode 应设为 false，以确保包含社区可视化图表的报告可以快速加载。要详细了解缓存，请参阅缓存高级指南。

后续步骤

现在，您已经编写了可视化图表代码，接下来请了解如何托管可视化图表。