Vaadin Charts 2共享工具提示示例

Question

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

Vaadin Charts Demo有一个Lines 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轴是日期时间DataSeries。

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

也许有人可以张贴一个简单的完整例子？

Answer 1

看起来您复制了Vaadin Charts演示中的数据 - 但是他们的源渲染器已经渲染了HTML。看看the original class in 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>");