问题标签 [vaadin-charts]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
96 浏览

vaadin - Vaadin Charts:用悬停点触发点击事件

我有一个这样的 Vaadin 图表:

带有悬停点的图表 .

我的目标是在单击图表时获得悬停的 X 值。根据上一张图片,我想知道点击了哪个月份区域(图中所选区域为蓝色)。

我已经在该图表中添加了一个 PointClickListener,并且在该事件中我可以获得所需的信息,但我必须单击完全悬停该点。在月份区域中单击不会触发 PointClickListener:

所以我想知道是否有任何方法可以通过单击该区域而不是正好在该点上方来获得悬停的月份。

0 投票
3 回答
107 浏览

java - Vaadin 8 Chart 删除情节和标题之间的多余空间

我正在使用 Vaadin 8 图表插件在 gridLayout 中创建仪表,如下面的快照所示。我正在尝试删除图表和标题区域之间的多余间距,如 RED 中突出显示的那样。在此处输入图像描述

用于创建仪表的代码片段

有关如何删除多余空间的任何指示???

TIA

0 投票
1 回答
21 浏览

java - DataSeriesItem 可以分组而不是单独出现吗?

我有一个数据集,可以捕获插座的结束日期时间,如下面的屏幕截图所示:

样本数据集,EOD Int Time 是 Double 格式的时间

注意:最后一列 EOD Int Time 转换为 24 小时制十进制格式,因为 DataSeriesItem 构造函数将数字值作为其第二个参数。

我目前正在尝试将其可视化为折线图,就像带有不规则间隔的时间数据示例(请参见此处)。

由于这是在数据集中,因此我尝试以 DataSetItem 的形式捕获它们,然后将其放入多个 DataSeries。下面的这段代码是主要的:

发生的情况是,例如 MY012,图表中出现三个系列/线,彼此重叠,相同的长度和曲线。每行都有三个 EOD 日期和时间点。下面的屏幕截图显示了当前结果:

在此处输入图像描述

MY015 在图例部分出现了 3 次。它应该只显示一次。

  1. 在这种情况下,我们是否可以将其实际分组为一个,而不是将 30 条记录显示为 30 系列,而应显示为 12 系列/出口中的 30 条记录?

  2. 如果不是,可以考虑哪些替代方案来解决这个问题?

  3. 这在某种程度上是 Vaadin Charts 4.0.5 下折线图的错误/限制吗?
0 投票
0 回答
81 浏览

java - 导出的 SVG 溢出边界

我正在使用 vaadin-charts:3.2.0 可视化一些数据,并且我正在尝试从图表中导出 SVG。我得到了一些结果,但并不令人满意。我只能共享屏幕主机而不是 SVG 本身。我还必须对标签进行像素化以掩盖私人数据。

在屏幕上看到的原始 vaadin 图表: 在屏幕上看到的原始 vaadin 图表

导出的 SVG: 导出的 SVG

一个问题是标签溢出了 svg 边界。并且图表图纸也超出了边界,使其看起来像是一张不完整的图纸。知道这个结构有什么问题吗?

在一个组件内:

0 投票
1 回答
152 浏览

java - 如何在 Vaadin Flow 图表中应用 VaadinIcons 作为标记符号?

我有一个Vaadin Charts Flow 6折线图,想将一些VaadinIcons定义为标记符号。

我怎样才能做到这一点?

MarkerSymbol是一个接口,实现为

  • MarkerSymbolEnum用于提供预定义的标记,例如。圆形、方形、菱形等
  • MarkerSymbolUrl,用于提供应用作标记的图像的 URL

我没有看到有机会检索VaadinIcon的 URL或直接设置它。

0 投票
1 回答
39 浏览

vaadin - Vaadin 图表:列堆栈图中的每个 X-Tick 上均未显示第二个和后续项目

根据下面的结果集,我创建了一个列堆栈图。它们已被转换为 4 属性对象列表(称为 SKUQtyMetric - 除了 Quantity as Integer 之外,所有都是字符串)

来自数据库的结果集

将其转换为堆栈图时,我无法让第二个项目出现在每个 x 刻度中的第一个项目旁边(X 代表小时)。如果我没记错的话,应该只有四个 DataSeries 对象,每个对象代表一个插座,然后执行一个内部循环。顺便说一句,即使有多个项目,每个出口都被指定一种颜色(我限制选择三个项目以在数据库中搜索),因此下面有outletFromH代码。

代码的当前渲染(使用 Vaadin 图表 4)如下:

渲染时,我只能得到这个结果:

当前图表

这是当前的图表,但缺少第二项(椰子水),以红色涂鸦显示。我不确定我的 Map 类或我控制的列表对象是否不正确,或者可能应该有八个而不是四个 DataSeries(每个都是一个出口和一个产品)。如果没有,是否有比我现在正在做的更有效的方法来处理呈现图表的代码?

0 投票
1 回答
35 浏览

charts - 如何更改 resetZoomButton 文本(Vaadin 图表)?

有人知道如何更改 reseZoomButton 文本(原始“重置缩放”)吗?似乎必须为此使用 Highcharts 对象。如何在 Vaadin Charts 中访问它?谢谢你。

0 投票
1 回答
48 浏览

vaadin - 如何使用 Vaadin 14+ 创建“频谱”图表

Vaadin 14(或更高版本)有没有办法创建所谓的“光谱”图表?从本质上讲,它与“散点”图 99% 相同,只是从该点一直画到 x 轴(请参见下面的图 1 和图 2,其中更多或看起来像正确的光谱图。) . 我创建了一个“hack”来使用“折线图”在 Vaadin 中实现这些准频谱图,并在我的直接点的左侧和右侧添加两个强度为 0 的“假”点(如下面的代码片段所示,标题为“代码片段 1")。虽然我的 hack 或多或少有效(请参见下面的图 1 图像),但它会导致一些问题:1)它似乎使线条看起来更像条形图矩形(请参见图 2)而不是窄点线条;2)似乎在x轴位置上造成了轻微的错误。例如,在图 2 中,黑线在蓝线的左侧;但在图 3 中(只不过是放大的透视图),它在右边;和 3) 它导致 x 轴以与系列相同的颜色出现,因为我的 hack 导致出现一条线,将一个点的假右“0”与下一个点的假左“0”连接起来。(另外,这意味着我的图表的点数是它需要的点数的 3 倍,因为每个真实点都有两个假的 0 点。)因为我的 hack 导致出现一条线,将一个点的假右“0”与下一点的假左“0”连接起来。(另外,这意味着我的图表的点数是它需要的点数的 3 倍,因为每个真实点都有两个假的 0 点。)因为我的 hack 导致出现一条线,将一个点的假右“0”与下一点的假左“0”连接起来。(另外,这意味着我的图表的点数是它需要的点数的 3 倍,因为每个真实点都有两个假的 0 点。)

代码片段1:

图1: 在此处输入图像描述

图 2:

在此处输入图像描述

我在 Open jdk 11 上使用 Vaadin 14.1.19,并在 Chromebook 上使用 Chrome 作为浏览器。

0 投票
1 回答
58 浏览

vaadin - Vaadin 14 主题 - 使用“包含”

最近,我将应用程序和组件的 CSS 样式切换为主题(在 vaadin 14.6 中添加)。现在我正在寻找一种替代方法来包含@CssImport 注释的参数。

我们对 vaadin-chart 进行了一些样式更改,但我们需要包含原始vaadin-chart-default-theme

有没有办法通过主题支持实现相同的目标?

谢谢

0 投票
1 回答
69 浏览

vaadin - Vaadin 热图不支持 40x40 (1600) 点?

在 Vaadin 14.6.1 中,我试图从这里创建一个 Vaadin 热图,愚弄文档/示例。

但是,我遇到了一些问题/问题,以下按重要性降序排列:

  1. 热图支持 30 行 x 30 列;但是当我尝试 40 行乘 40 列时,整个热图显示为单一颜色(在我的情况下为蓝色)。
  2. 是否可以手动设置配色方案的最小数值和最大数值。这样,如果我一天绘制我的数据并且它的值在 0 到 1 的范围内,但是在另一天的另一个数据集上,数值范围在 0 到 0.5 之间,配色方案范围不会自动改变(介于 0 和 0.5 之间)并混淆用户。
  3. 文档中,它列出了以下方法,但它们似乎在 Vaadin 14.6.1 中不存在
  1. 当我将鼠标悬停在数据点上时,工具提示是否只能显示数值(而不是 x、y 坐标或系列名称等?)
  2. 数据点的数量有限制吗?我希望如果上面的#1 得到解决,我可以绘制一个 100 x 100(即 10,000)点热图。
  3. 如果我绘制 100×100,x 和 y 轴上会有很多标签。在我的例子中,x 和 y 轴实际上是数字的,所以我按照文档的建议做了,只是在 xaxis 和 yaxis 点上放置了类别标签。但是,有没有办法只显示每个“第n个”标签,让x轴和y轴不那么拥挤?(这基本上会模仿 Vaadin 对正常折线图的 x 轴和 y 轴所做的事情)。