2

我需要 Vaadin Charts 2 中的共享工具提示示例。这意味着对于 X 轴上的一个插槽，多个 Y 轴值一起显示在一个工具提示框中。

Vaadin Charts DemoLines with Complex Html tooltip显示了这样一个共享工具提示。请注意两个系列中的数据点（红色菱形和蓝点周围的光晕）如何突出显示，而单个工具提示框显示两个数据点的值。

带有在两个数据点之间共享的工具提示的示例图表的屏幕截图。

Demo 显示的源代码的摘录。

Tooltip tooltip = new Tooltip() ;
tooltip.setShared( true ) ;
tooltip.setUseHTML( true ) ;
tooltip.setHeaderFormat( "{point.key}" ) ;
tooltip.setPointFormat( "" ) ;
tooltip.setFooterFormat( "{series.name}: {point.y} EUR" ) ;

但是，将该代码改编为我自己的项目失败了。我的 X 轴是 date-time DataSeries。

  • GOOD
    成功呈现为point.key日期时间字符串。
  • BAD
    The{series.name}: {point.y}出现在字面上，而不是被解释为呈现一个值。

也许有人可以发布一个简单的完整示例？

4

1 回答 1

0

看起来您从 Vaadin Charts Demo 复制了数据 - 但是他们的源渲染器已经渲染了 HTML。看看git 中的原始类：

tooltip.setHeaderFormat("<small>{point.key}</small><table>");
tooltip.setPointFormat("<tr><td style=\"color: {series.color}\">{series.name}: </td><td style=\"text-align: right\"><b>{point.y} EUR</b></td></tr>");
tooltip.setFooterFormat("</table>");
于 2016-01-29T12:34:44.523 回答