2

Vaadin Charts 2 の共有ツールチップの例が必要です。これは、X 軸の 1 つのスロットに対して、複数の Y 軸の値が 1 つのツールチップ ボックスに一緒に表示されることを意味します。

Vaadin Charts Demo には、Lines with Complex Html tooltipこのような共有ツールチップが表示されます。両方のシリーズのデータ​​ ポイント (赤いひし形と青い点の周りのハロー) が強調表示され、1 つのツールヒント ボックスに両方のデータ ポイントの値が表示されることに注意してください。

2 つのデータ ポイント間でツールヒントが共有されているサンプル グラフのスクリーン ショット。

デモの表示されたソース コードからの抜粋。

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-timeDataSeriesです。

  • GOOD
    はpoint.key日時文字列として正常にレンダリングされます。
  • 悪い
    値をレンダリングするために解釈されるの{series.name}: {point.y}ではなく、文字どおりに表示されます。

おそらく誰かが簡単な完全な例を投稿できますか?

4

1 に答える 1

0

It looks like you copied the data from the Vaadin Charts Demo - however their source renderer has rendered the HTML. Have a look at 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>");
于 2016-01-29T12:34:44.523 に答える