Как изменить стиль штрихов в графиках Vaadin 14? - PullRequest
Новая
       19

Как изменить стиль штрихов в графиках Vaadin 14?

0 голосов
/ 23 марта 2020

В Vaadin 14 я пытаюсь определить, как изменить стиль линии графика с solid на пунктирную? (Мне нужно сделать это программно.) Сначала это казалось тривиальным (на основе https://vaadin.com/blog/styling-your-vaadin-charts), но я не вижу API ни для одной настройки цвета (например, 

PlotOptionsLine redBirdOptions = new PlotOptionsLine();
redBirdOptions.setColor(new SolidColor("#d62031"));

) или настройка стиля da sh, доступная в Vaadin 14. У кого-нибудь есть примеры того, как можно программно установить стиль (и цвет) da sh рядов в линейном графике Vaadin 14?

1 Ответ

0 голосов
/ 24 марта 2020

Отказ от ответственности: Нет способа сделать это только Java. Вам нужно будет стилизовать диаграмму, используя CSS. Хотя цвет можно изменить с помощью настроек стилей в Java, как показано здесь Пользовательские цвета древовидной карты , я буду придерживаться подхода CSS ниже

Документация, на которую вы ссылаетесь Это для Vaadin 8, который использует другую версию библиотеки Highcharts. В Vaadin 14 вам необходимо настроить параметры через css. Специально для вашего случая использования нет примера, но вы можете найти в ссылках ниже всю необходимую информацию:

  • CSS конфигурация файла и правильная аннотация импорта CSS Стиль
  • Имена классов, которые можно использовать для создания стилей диаграмм API Highcharts

Цвет задается с помощью класса .highcharts-color-{n} (или свойства --vaadin-charts-color-{n}, что является предпочтительным здесь), где n может быть определено для параметров на стороне Java, например: plotOptions.setColorIndex(2);. Пример старшей диаграммы для цветов можно найти здесь: CSS Цвета

Для пунктирной линии css Вы можете проверить это: CSS dashstyle .

В целом, это должно сработать:

  1. Создать chartStyles.css файл
  2. Поместить туда содержимое ниже: 
:host {
    --vaadin-charts-color-2: red;
}
.highcharts-series-0 {
    stroke-dasharray: 1, 3;
}

Импортируйте стиль, используя: @CssImport(value = "./styles/chartStyles.css", themeFor = "vaadin-chart", include = "vaadin-chart-default-theme")

Параметры печати имеют colorIndex 2 (так как это значение в css, мы ссылаясь на): 

PlotOptionsAreasplinerange range=new PlotOptionsAreasplinerange();
range.setColorIndex(2);
dataSeries.setPlotOptions(range);

После этого цвет диаграммы должен измениться. Вы можете пропустить присвоение индекса и использовать --vaadin-charts-color-0, если у вас есть только один график на странице. Если нет, я бы предложил добавить названия тем в диаграмму и настроить файл css для их использования. Таким образом, вы можете быть уверены, что затронут только нужный вам график.

...