首页 > 解决方案 > 以编程方式为 Vaadin 图表系列创建颜色

问题描述

在 Vaadin 14.4.2 中,是否可以通过以编程方式计算系列颜色的方式创建具有多个系列的图表?具体来说,我可能有大约 100 个系列,但它们都与“数字”(特别是化学元素的质量)相关联。因为我知道在我的应用程序中“数字”(即质量)的范围是 100 到 2000,所以我希望系列的颜色范围从蓝色(100)到红色(2000)。这样,当用户查看图表时,他们可以直观地知道该系列是指重化学品(红色)还是轻化学品(蓝色)。

为了实现这一点,我认为我需要某种方式以编程方式设置系列的颜色,但我认为这在 Vaading 14.4.2 中实际上是不可能的,对吧?

以下是此类图表的示例: 在此处输入图像描述

标签: vaadinvaadin-flowvaadin14

解决方案


数据系列的颜色由自定义属性--vaadin-charts-color-0-- vaadin-charts-color-1, ... ,定义--vaadin-charts-color-9。您可以以编程方式定义它们的值,如下所示

charts.getElement().getStyle().set("vaadin-charts-color-1","#2dd7a4");

第二个字符串参数是颜色值,它可以是 CSS 接受的任何格式。


推荐阅读