Как применить VaadinIcons в качестве маркерных символов в диаграммах для Vaadin Flow?

У меня есть линейная диаграмма 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);

Я не видел возможности получить URL-адрес VaadinIcon или напрямую установить его.


java vaadin10 vaadin-charts
person SignorMacchina    schedule 01.07.2019    source источник
comment
Предоставьте минимальный воспроизводимый пример.   -  person M. S.    schedule 01.07.2019

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете динамически создать 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 также публикует ресурсы svg VaadinIcon на GitHub. В качестве альтернативы вы можете указать путь к локальному каталогу.

Логика, используемая для создания URL-адреса, взята из Icon конструктор оболочки public Icon(VaadinIcon icon).

Vaadin в настоящее время (по состоянию на июль 2019 года), похоже, не разрешает прямое использование VaadinIcons в качестве маркерных символов.

Для справки я включил некоторые сведения о классах Marker и Icon.

ДЕТАЛИ МАРКЕРА КЛАССА

Класс Маркер (расширяет абстрактный класс AbstractConfigurationObject) имеет элемент MarkerSymbol, который просто реализует интерфейс Сериализуемый.

Класс MarkerSymbolUrl реализует интерфейс MarkerSymbol и, похоже, представляет собой простой класс-оболочку getter/setter вокруг URL-адреса String.

Класс MarkerSymbolEnum реализует только статический список значений перечисления, поэтому не имеет значения.

ДЕТАЛИ ЗНАЧКА КЛАССА

Класс Icon конструктор-оболочка public Icon(VaadinIcon icon) вызывает конструктор public Icon(String collection, String icon) с VaadinIcon, который использует надкласс Icon Component для вызова унаследованной функции-члена Элемент.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);
}

Элемент расширяет абстрактный класс Node, реализующий интерфейс Serializable.

ДАЛЬНЕЙШИЕ ШАГИ

В конечном счете, это, по-видимому, указывает на то, что классы Marker/MarkerSymbol и Icon не имеют общего суперкласса (кроме Object), поэтому нет возможности взаимодействия.

Для более глубокого погружения я бы посмотрел, как различные компоненты Vaadin отображают пользовательский интерфейс с использованием сгенерированной разметки, но на данный момент кажется, что использование MarkerSymbolUrl и динамически вычисляемый URL-адрес из VaadinIcon представляют собой единственный простой обходной путь.

person iokevins    schedule 01.07.2019
comment
Я использую Vaadin 10 и Charts for Vaadin Flow. В Vaadin ‹ 12 DataSeriesItem, Marker и т. д. определены в коде Charts. - person SignorMacchina; 02.07.2019
comment
@SignorMacchina Спасибо; Я обновил свой ответ, указав способ динамического определения URL-адреса VaadinIcon с учетом его перечисления. При этом вы можете установить URL-адрес маркера. - person iokevins; 02.07.2019