highstocks.js のカスタム フォーマッタ関数を作成しました。
var tooltip = [];
for (key in this.points) {//if point type is portfolio
if ( this.points[key].point.type == 'portfolio' ) {
tooltip[key] = '<span style="color:' + his.points[key].series.color +'">' + this.points[key].series.name + '</span>' + '<br/><b>'+ _('', 'Net assets: ') + _s(this.points[key].point.sum, 2) + '</b>' + '<br/><b>'+ _('', 'Чистые активы: ') + _s(this.points[key].point.netassets, 2) +'</b> (<span style="color:' + ( (this.points[key].point.change < 0 )?'#b86565':'#619000') +'">' + _s(this.points[key].point.change, 0) +'%</span>)<br/>';
} else {
tooltip[key] = '<span style="color:' + this.points[key].series.color +'">' + this.points[key].series.name + '</span>: <b>'+ _s(this.points[key].point.y, 2) +'</b> (<span style="color:' + ( (this.points[key].point.change < 0 )?'#b86565':'#619000') +'">' + _s(this.points[key].point.change, 0) +'%</span>)<br/>';
}
}
var tl = '';
for (key in tooltip) {
tl += tooltip[key]
}
var date = Highcharts.dateFormat('%d %b %Y', this.points[0].point.x);
tl = date + '<br/>' +tl;
return tl;
特徴は、この関数がポイントの Y だけでなく、タイプなど、ポイントに追加したいくつかの追加プロパティも使用することです。
「ポートフォリオ」タイプのポイントの場合、ツールトップは異なる方法でレンダリングする必要があり、「通常の」ポイント タイプよりも多くのデータが必要です。
conatiner div の幅が小さい場合、div の幅が大きい場合は正常に機能しますが、テンプレートが機能しないという問題が発生しました。
Highstocks.js は、グラフを比較的小さな領域にレンダリングするときにデフォルトの集計を行います: http://api.highcharts.com/highstock#plotOptions.area.dataGrouping
ポイントがグループ化されると、すべての追加属性が失われ、Y プロパティのみが残るため、複雑なツールトップは機能しません。
これを修正するには、チャート オプションでデータのグループ化を無効にする必要がありました。
plotOptions: {
series: {
dataGrouping: {
enabled: false
}
}
},
dataGrouping を無効にせずに小さなグラフに複雑なツールチップを表示する方法はありますか?