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

您可以按以下方式动态构建指向VaadinIcon资源的URL：

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作为标记符号。

作为参考，我提供了Marker和Icon类的一些详细信息。

CLASS MARKER的详细信息

类Marker（扩展了抽象类AbstractConfigurationObject）具有成员MarkerSymbol，成员简单地实现了接口Serializable。

类MarkerSymbolUrl实现了接口MarkerSymbol，似乎代表了一个简单的围绕String url的getter / setter包装器类。

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

类图标的详细信息

类Icon的包装构造函数public Icon(VaadinIcon icon)用VaadinIcon调用构造函数public Icon(String collection, String icon)，该构造函数使用Icon超类Component的功能来调用继承的成员函数{{3} }。Element，它存储计算出的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扩展了抽象类setAttribute(...)，该类实现了Serializable接口。

下一步

最终，这似乎表明Marker / MarkerSymbol和Icon类没有共享公共的超类（除了Object），因此没有互操作性。

为了更深入地研究，我将研究各种Vaadin组件如何使用生成的标记来呈现UI，但现在看来，它似乎使用MarkerSymbolUrl，并且从VaadinIcon动态计算的URL代表了唯一简单的解决方法。

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

1 个答案: