ページに「タブ コンテナー」を設定し、それぞれに異なるハイチャート パイ チャートを含む 3 つのタブを設定しました。アクティブなタブに応じてレンダリングされます。それらのそれぞれについて、このコードを使用して、凡例の最後に合計 100% の列を配置しました。
chart: {
type:'pie',
renderTo: 'ctl00_ContentPlaceHolder1_Overview1_AssetXRayChart',
events: {
load: function(event) {
$('.highcharts-legend-item').last().append('<br/><div style="width: 220px; margin-left: 190px;">_____</div><br/><div style="width:220px"><span style="float:right"><b>100%</b></span> </div>');
}
}
}
最初のレンダリングではすべてがうまく見えますが、後続のタブのいずれかをクリックしてそれらの円グラフを表示し、別のタブに戻ってグラフを表示すると、3 番目を除いて合計列がなくなっていることが既にわかりました。タブは、最終的にレンダリングされたグラフです。レンダリングされた 3 番目のグラフが実際には公式の「最後の」凡例アイテム要素であり、それがそのまま残っているためだと思いますが、これらはすべてそれぞれ独自にレンダリングされるため、合計行がそこにとどまることを許可してはいけませんか? それは、div または span に一意の ID を使用せずに、それらのそれぞれにまったく同じコード行を使用しているためですか? どんな助けでも大歓迎です。どうもありがとう、NickG