如何在Vaadin 14图形中更改破折号样式？

Question

在Vaadin 14中，我试图确定如何将图形的线条样式从实线更改为虚线？ （我需要以编程方式进行此操作。）起初，它看起来很琐碎（基于https://vaadin.com/blog/styling-your-vaadin-charts），但是我看不到任何一种颜色设置的API（例如

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

）或Vaadin 14中可用的破折号样式设置。有人有示例如何在Vaadin 14折线图中以编程方式设置系列的破折号样式（和颜色）吗？

Answer 1

免责声明：没有办法仅使用Java。您将需要使用CSS设置图表样式。虽然可以通过Java中的样式设置来更改颜色，如此处Treemap custom colors所示，但我将遵循下面的CSS方法

---

您引用的文档适用于Vaadin 8，该文档使用highcharts库的另一个版本。在Vaadin 14中，您需要通过CSS配置设置。没有专门针对您的用例的示例，但是您可以在下面的链接中找到所有必需的信息：

• CSS文件配置和正确的导入注释CSS Styling
• 可用于为图表Highcharts API设置样式的类名

使用.highcharts-color-{n}类（或--vaadin-charts-color-{n}属性，这里是首选）设置颜色，其中 n 可以为Java端的选项定义，如下所示： plotOptions.setColorIndex(2);。有关颜色的图表示例，请参见：CSS Colors

对于破折号CSS，您可以检查以下内容：CSS dashstyle。

总体而言，这应该可以解决问题：

1. 创建一个chartStyles.css文件
2. 将下面的内容放在此处：

:host {
    --vaadin-charts-color-2: red;
}
.highcharts-series-0 {
    stroke-dasharray: 1, 3;
}

1. 使用以下命令导入样式： @CssImport(value = "./styles/chartStyles.css", themeFor = "vaadin-chart", include = "vaadin-chart-default-theme")

2. 绘图选项的colorIndex为 2 （因为这是我们所指的CSS中的值）：

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

此后，图表颜色应更改。如果页面上只有一个图表，则可以跳过索引分配并使用--vaadin-charts-color-0。如果没有，我建议将主题名称添加到图表并调整css文件以使用它们。这样，您可以确保只影响所需的图表。