自定义可视化 - 教程

开始之前

1. 确保已设置开发环境并安装定制可视化 CLI 工具，如 设置开发环境中所述。
2. 本教程假定您已掌握有关 d3 的基础知识。 具备这些知识后，您执行本文档中的步骤会轻松得多，并且能够在完成本教程后做出自己的修改。
3. 本教程中的示样是基于 TypeScript 的，因此建议您掌握有关 TypeScript 的基础知识。
4. customvis-lib中的所有类和函数都提供了 API 参考 文档。

在本教程结束时，您已创建如下所示的可视化：

该可视化有三个数据槽和一个可自定义的调色板。 此外，该可视化还支持工具提示、选择和突出显示，并且在 IBM Cognos Analytics 仪表板或报告中使用时会显示基于产品的图例。

部件 1 将设置数据模型并实现初始化和呈现代码。 在此部分结束时，您将获得一个正常运作、载有数据的散点图可视化，此可视化支持突出显示、选择和工具提示。

部件 2 将向可视化添加更多属性，例如 x 轴和 y 轴的点形状，标题和最大值。 您将使用不同的属性类型，并了解如何使用属性的“defaultValue”和“allowNull”特性。

部件 3 将通过使图注适应于散点符号，根据 showTitle 属性的值设置标题属性的活动状态以及提供属性文字说明来进一步改进可视化。

部件 4 是本教程的最后一部分。 此部分说明如何定义可选槽，更改图注顺序以及提供本地化。 通过本地化，可以为用户界面元素（例如，可视化的槽和属性文字说明）提供各种语言的翻译版本。

在每个部分的末尾都有一个指向该部分中所用源代码的链接。 每个部分都基于前一部分进行构建，因此如果要跳过某个部分，那么可以下载前一部分的源代码，然后对其继续进行操作。

• 下载 教程的完整源代码。