编写可视化图表

编写可视化图表代码

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

该库中最重要的函数是 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

}

数据洞察会加载并运行 JavaScript 文件,而不是 HTML。所有 DOM 操作都需要通过 JavaScript 执行。

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

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

打包代码

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

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

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

定义清单

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

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

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

后续步骤

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