1

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

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

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

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

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

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

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

1 回答 1

2

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

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

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

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

于 2022-02-07T09:15:44.527 回答