如何将 VaadinIcons 用作 Vaadin Flow 图表中的标记符号？

Question

我有一个 Vaadin Charts Flow 6 折线图，想将一些 VaadinIcons 定义为标记符号。

我怎样才能做到这一点？

MarkerSymbol 是一个实现为

的接口

MarkerSymbolEnum 用于提供预定义标记，例如。圆形、方形、菱形等
MarkerSymbolUrl 用于向图像提供 URL 用作标记

AtomicInteger xValue = new AtomicInteger(0);
List<Double> yValues = new Random( ).doubles(10, -10, 10).boxed( ).collect(Collectors.toList( ));        
List<DataSeriesItem> items = yValues.stream( )
                             .map(yValue -> new DataSeriesItem(xValue.getAndIncrement( ), yValue))
                             .collect(Collectors.toList( )); 

/* Instead of MarkerSymbolEnum or MarkerSymbolUrl, retrieve a VaadinIcon*/
items.forEach(item -> item.getMarker( ).setSymbol(MarkerSymbolEnum.DIAMOND));
items.forEach(item -> item.getMarker( ).setSymbol(new MarkerSymbolUrl("foo/bar.png")));
// new Icon(VaadinIcon.CHEVRON_UP);

DataSeries series = new DataSeries("example");
series.setData(items);

Chart chart = new Chart(ChartType.LINE);
chart.getConfiguration( ).addSeries(series);

我没有看到检索 VaadinIcon 的 URL 或直接设置它的机会。

Answer 1

您可以按如下方式动态构造一个 URL 到 VaadinIcon 资源：

String loc = "https://github.com/vaadin/vaadin-icons/blob/master/assets/png/"
String url = loc + VaadinIcon.CHEVRON_UP.name().toLowerCase().replace('_', '-');
items.forEach(item -> item.getMarker( ).setSymbol(new MarkerSymbolUrl(url)));

Vaadin 还在 GitHub 上发布 svg VaadinIcon 资产。或者，您可能更喜欢指向本地目录路径。

用于创建 url 的逻辑来自 Icon 包装器构造函数 public Icon(VaadinIcon icon)。

Vaadin 目前（截至 2019 年 7 月）似乎不允许直接使用 VaadinIcons 作为标记符号。

作为参考，我包含了 classes 标记和图标的一些详细信息。

CLASS 标记详情

Class Marker (extends abstract class AbstractConfigurationObject) has member MarkerSymbol which simply implements interface Serializable.

Class MarkerSymbolUrl 实现接口 MarkerSymbol 并且似乎代表一个简单的 getter/setter 包装器 class 围绕字符串 url.

Class MarkerSymbolEnum 仅实现枚举值的静态列表，因此不相关。

CLASS 图标详细信息

Class Icon 包装器构造函数 public Icon(VaadinIcon icon) 使用 VaadinIcon 调用构造函数 public Icon(String collection, String icon)，它使用 Icon superclass Component 调用继承成员函数 Element.setAttribute(...) 的功能，它存储计算出的 VaadinIcon 属性字符串（我相信这最终会写在 div 标签中）：

public Icon(VaadinIcon icon) {
    this(ICON_COLLECTION_NAME, icon.name().toLowerCase().replace('_', '-'));
}

public Icon(String collection, String icon) {
    // iron-icon's icon-attribute uses the format "collection:name",
    // e.g. icon="vaadin:arrow-down"
    getElement().setAttribute(ICON_ATTRIBUTE_NAME, collection + ':' + icon);
}

Element extends abstract class Node，它实现了接口 Serializable。

后续步骤

最终，这似乎表明 classes Marker/MarkerSymbol 和 Icon 不共享一个公共的 superclass（Object 除外），因此没有互操作性。

对于更深入的 dive，我会看看各种 Vaadin 组件如何使用生成的标记呈现 UI，但现在它似乎使用 MarkerSymbolUrl 和动态计算的 [= VaadinIcon 中的 79=] 表示唯一简单的解决方法。

如何将 VaadinIcons 用作 Vaadin Flow 图表中的标记符号？

How to apply VaadinIcons as marker symbols in Charts for Vaadin Flow?

java

vaadin10

vaadin-charts