我们如何在 Foundry-Slate 中扩展图表图例

Question

在 slate 中，图表小部件具有标签选项，可在图表的某个位置（顶部、左侧、底部……）显示图例（颜色点 + 标签名称）。

我注意到此图例条形图有 2 个限制，我想在我的 Slate 应用程序上改进它们。

• 1 个问题：标签按顺序排列在条形图上出现的顺序系列（从左到右）。
• 2 问题：当分段和未分段数据堆叠在条形图上时，未分段数据的标签颜色错误（即使我们设置了系列颜色参数，如果我们不颜色属性是随机变化的从一个加载到下一个）。

出于这个原因，我决定在 HTML 小部件中生成我的 on 标签。仅使用对标签进行排序并为每个标签返回<div class="bp3-label" style="background:${labelColor};">${labelName}<\div> 的函数，我就得到了很好的结果。但是我失去了交互性（这是一个方便的标签功能）。

有没有办法将此交互性转移到我的“自定义标签”并单击此选择我的条形图上的所有相关条？

我正在考虑在 DIV 上使用 slClickEvent 和 slClickEventValue 道具来推送与变量中单击的标签相关的数据，并使条形图的“selectedValue”属性依赖于该变量。

• 这是最好的方法吗？
• 是否会按照图表“selectedValue”突出显示条形？

Answer 1

您在这里是正确的 - 我经常在 HTML 小部件中构建自定义图表图例，与原生图例相比，可以更好地控制外观和交互。如果您在 Foundry 实例上进行搜索，您甚至会发现一个包含不同 HTML 小部件模式示例的 Slate 应用程序文件夹，其中一个名为 HTML - Legend 的应用程序显示了一些具有自定义 CSS 和蓝图样式的示例。

对于交互性，我可能会使用自定义 HTML 选择，而不是自定义 HTML 点击事件，因为通过自定义选择，Slate 会自动将 selected 类添加到您添加选择的任何元素，这将使更新样式以反映选择变得容易。

没有什么可以阻止您使用自定义 clickEvents 来执行此操作，但是您需要还做更多的工作来反映图例中的选择状态，否则就没有额外的功能。

如果您在您的 Foundry 实例中搜索 Line Chart Series Selection with Custom Legend，您会找到一个完全显示此内容的示例。在该特定示例中，通过更改线条样式在图表上指示线条“选择”；对于条形图，您实际上希望在 > 面板中模板化（使用 Handlebars） 图表的选择状态。然后，当用户使用图例进行选择时，图表将反映该选择，就像他们通过单击条本身进行选择一样。