我们如何在 Foundry-Slate 中扩展图表图例
How can we extend chart legend in Foundry-Slate
在 slate 中，图表小部件具有标签选项，可在图表的某些位置（顶部、左侧、底部...）显示图例（颜色点 + 标签名称）。
我注意到此图例 在条形图 上有 2 个限制，我想在我的 Slate 应用程序中改进它们。
- 1期：标签是按条形图上出现的顺序系列排序的（从左到右）。
- 2问题：分段数据和未分段数据堆叠在条形图上时，未分段数据的标签颜色错误（即使我们设置了系列颜色参数，如果不设置颜色属性是随机的并从一个加载更改为下一个）。
出于这个原因，我决定在 HTML 小部件中制作我的标签。我得到了一个很好的结果，只是一个排序标签的函数和每个标签的 return 一个 <div class="bp3-label" style="background:${labelColor};">${labelName}<\div>。但是我失去了交互性（这是标签的便利功能）。
有没有一种方法可以将这种交互性转移到我的“自定义标签”，然后点击它选择我的条形图上的所有相关条形？
我正在考虑在 DIV 上使用 slClickEvent 和 slClickEventValue 属性来将数据推送到变量中与单击的标签相关的数据，并使条形图成为“selectedValue”属性 取决于此变量。
- 这是最好的方法吗？
- 柱状图是否会根据图表“selectedValue”突出显示？
您走在正确的轨道上 - 我经常在 HTML 小部件中构建自定义图表图例，以便与本机图例相比更好地控制外观和交互。如果您在 Foundry 实例上搜索，您甚至会找到一个 Slate 应用程序文件夹，这些应用程序是不同 HTML 小部件模式的示例，包括一个名为 HTML - Legend 的应用程序，它显示了一些自定义 CSS 的示例和蓝图样式。
对于交互性，我可能会使用自定义 HTML 选择，而不是自定义 HTML 单击事件，因为使用自定义选择，Slate 会自动添加 selected class 添加到您已将选择添加到的任何元素，这将使更新样式以反映选择变得容易。
没有什么可以阻止您使用自定义 clickEvents 来执行此操作，但是您需要 还 做更多的工作来反映图例中的选择状态，否则继续没有额外的负担。
如果您在您的 Foundry 实例中搜索 Line Chart Series Selection with Custom Legend，您会找到一个准确说明这一点的示例。在该特定示例中，通过更改线条样式在图表上指示线条“选择”；对于条形图，您实际上想要在 /> 面板中 模板（带把手） 图表的选择状态。然后，当用户使用图例进行选择时，图表将反映该选择，就好像他们是通过自己点击条形来选择的一样。
在 slate 中，图表小部件具有标签选项，可在图表的某些位置（顶部、左侧、底部...）显示图例（颜色点 + 标签名称）。
我注意到此图例 在条形图 上有 2 个限制，我想在我的 Slate 应用程序中改进它们。
- 1期：标签是按条形图上出现的顺序系列排序的（从左到右）。
- 2问题：分段数据和未分段数据堆叠在条形图上时，未分段数据的标签颜色错误（即使我们设置了系列颜色参数，如果不设置颜色属性是随机的并从一个加载更改为下一个）。
出于这个原因，我决定在 HTML 小部件中制作我的标签。我得到了一个很好的结果，只是一个排序标签的函数和每个标签的 return 一个 <div class="bp3-label" style="background:${labelColor};">${labelName}<\div>。但是我失去了交互性（这是标签的便利功能）。
有没有一种方法可以将这种交互性转移到我的“自定义标签”，然后点击它选择我的条形图上的所有相关条形？
我正在考虑在 DIV 上使用 slClickEvent 和 slClickEventValue 属性来将数据推送到变量中与单击的标签相关的数据，并使条形图成为“selectedValue”属性 取决于此变量。
- 这是最好的方法吗？
- 柱状图是否会根据图表“selectedValue”突出显示？
您走在正确的轨道上 - 我经常在 HTML 小部件中构建自定义图表图例，以便与本机图例相比更好地控制外观和交互。如果您在 Foundry 实例上搜索，您甚至会找到一个 Slate 应用程序文件夹，这些应用程序是不同 HTML 小部件模式的示例，包括一个名为 HTML - Legend 的应用程序，它显示了一些自定义 CSS 的示例和蓝图样式。
对于交互性，我可能会使用自定义 HTML 选择，而不是自定义 HTML 单击事件，因为使用自定义选择，Slate 会自动添加 selected class 添加到您已将选择添加到的任何元素，这将使更新样式以反映选择变得容易。
没有什么可以阻止您使用自定义 clickEvents 来执行此操作，但是您需要 还 做更多的工作来反映图例中的选择状态，否则继续没有额外的负担。
如果您在您的 Foundry 实例中搜索 Line Chart Series Selection with Custom Legend，您会找到一个准确说明这一点的示例。在该特定示例中，通过更改线条样式在图表上指示线条“选择”；对于条形图，您实际上想要在 /> 面板中 模板（带把手） 图表的选择状态。然后，当用户使用图例进行选择时，图表将反映该选择，就好像他们是通过自己点击条形来选择的一样。