问题标签 [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.
java - DataSeriesItem 可以分组而不是单独出现吗?
我有一个数据集,可以捕获插座的结束日期时间,如下面的屏幕截图所示:
注意:最后一列 EOD Int Time 转换为 24 小时制十进制格式,因为 DataSeriesItem 构造函数将数字值作为其第二个参数。
我目前正在尝试将其可视化为折线图,就像带有不规则间隔的时间数据示例(请参见此处)。
由于这是在数据集中,因此我尝试以 DataSetItem 的形式捕获它们,然后将其放入多个 DataSeries。下面的这段代码是主要的:
发生的情况是,例如 MY012,图表中出现三个系列/线,彼此重叠,相同的长度和曲线。每行都有三个 EOD 日期和时间点。下面的屏幕截图显示了当前结果:
MY015 在图例部分出现了 3 次。它应该只显示一次。
在这种情况下,我们是否可以将其实际分组为一个,而不是将 30 条记录显示为 30 系列,而应显示为 12 系列/出口中的 30 条记录?
如果不是,可以考虑哪些替代方案来解决这个问题?
- 这在某种程度上是 Vaadin Charts 4.0.5 下折线图的错误/限制吗?
java - 导出的 SVG 溢出边界
我正在使用 vaadin-charts:3.2.0 可视化一些数据,并且我正在尝试从图表中导出 SVG。我得到了一些结果,但并不令人满意。我只能共享屏幕主机而不是 SVG 本身。我还必须对标签进行像素化以掩盖私人数据。
在屏幕上看到的原始 vaadin 图表:
导出的 SVG:
一个问题是标签溢出了 svg 边界。并且图表图纸也超出了边界,使其看起来像是一张不完整的图纸。知道这个结构有什么问题吗?
在一个组件内:
java - 如何在 Vaadin Flow 图表中应用 VaadinIcons 作为标记符号?
我有一个Vaadin Charts Flow 6折线图,想将一些VaadinIcons定义为标记符号。
我怎样才能做到这一点?
MarkerSymbol是一个接口,实现为
- MarkerSymbolEnum用于提供预定义的标记,例如。圆形、方形、菱形等
- MarkerSymbolUrl,用于提供应用作标记的图像的 URL
我没有看到有机会检索VaadinIcon的 URL或直接设置它。
vaadin - Vaadin 图表:列堆栈图中的每个 X-Tick 上均未显示第二个和后续项目
根据下面的结果集,我创建了一个列堆栈图。它们已被转换为 4 属性对象列表(称为 SKUQtyMetric - 除了 Quantity as Integer 之外,所有都是字符串)
将其转换为堆栈图时,我无法让第二个项目出现在每个 x 刻度中的第一个项目旁边(X 代表小时)。如果我没记错的话,应该只有四个 DataSeries 对象,每个对象代表一个插座,然后执行一个内部循环。顺便说一句,即使有多个项目,每个出口都被指定一种颜色(我限制选择三个项目以在数据库中搜索),因此下面有outletFromH代码。
代码的当前渲染(使用 Vaadin 图表 4)如下:
渲染时,我只能得到这个结果:
这是当前的图表,但缺少第二项(椰子水),以红色涂鸦显示。我不确定我的 Map 类或我控制的列表对象是否不正确,或者可能应该有八个而不是四个 DataSeries(每个都是一个出口和一个产品)。如果没有,是否有比我现在正在做的更有效的方法来处理呈现图表的代码?
charts - 如何更改 resetZoomButton 文本(Vaadin 图表)?
有人知道如何更改 reseZoomButton 文本(原始“重置缩放”)吗?似乎必须为此使用 Highcharts 对象。如何在 Vaadin Charts 中访问它?谢谢你。
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:
图 2:
我在 Open jdk 11 上使用 Vaadin 14.1.19,并在 Chromebook 上使用 Chrome 作为浏览器。
vaadin - Vaadin 14 主题 - 使用“包含”
最近,我将应用程序和组件的 CSS 样式切换为主题(在 vaadin 14.6 中添加)。现在我正在寻找一种替代方法来包含@CssImport 注释的参数。
我们对 vaadin-chart 进行了一些样式更改,但我们需要包含原始vaadin-chart-default-theme。
有没有办法通过主题支持实现相同的目标?
谢谢
vaadin - Vaadin 热图不支持 40x40 (1600) 点?
在 Vaadin 14.6.1 中,我试图从这里创建一个 Vaadin 热图,愚弄文档/示例。
但是,我遇到了一些问题/问题,以下按重要性降序排列:
- 热图支持 30 行 x 30 列;但是当我尝试 40 行乘 40 列时,整个热图显示为单一颜色(在我的情况下为蓝色)。
- 是否可以手动设置配色方案的最小数值和最大数值。这样,如果我一天绘制我的数据并且它的值在 0 到 1 的范围内,但是在另一天的另一个数据集上,数值范围在 0 到 0.5 之间,配色方案范围不会自动改变(介于 0 和 0.5 之间)并混淆用户。
- 在文档中,它列出了以下方法,但它们似乎在 Vaadin 14.6.1 中不存在
- 当我将鼠标悬停在数据点上时,工具提示是否只能显示数值(而不是 x、y 坐标或系列名称等?)
- 数据点的数量有限制吗?我希望如果上面的#1 得到解决,我可以绘制一个 100 x 100(即 10,000)点热图。
- 如果我绘制 100×100,x 和 y 轴上会有很多标签。在我的例子中,x 和 y 轴实际上是数字的,所以我按照文档的建议做了,只是在 xaxis 和 yaxis 点上放置了类别标签。但是,有没有办法只显示每个“第n个”标签,让x轴和y轴不那么拥挤?(这基本上会模仿 Vaadin 对正常折线图的 x 轴和 y 轴所做的事情)。