ブートストラップ+ HighCharts.jsドーナツチャートの反応的な画像位置

Question

ドーナツチャートの内側に画像を挿入する必要がありますが、ブートストラップを使用しているときに反応して画像の位置がドーナツチャートから外れます。画像をドーナツチャートの中央に表示したいのですが、どうすればいいですか？

コード例：http://paste.ubuntu.com/16889111/

Answer 1

chart.renderer.imageのためのあなたのコードは、相対的ではない固定値を使用している：上隅の

// Render the image 
chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', 220, 200, 60, 60) 
.add(); 

私はあなたの四つの値（上隅のx位置を作ることをお勧め

、y座標

、イメージの幅、およびイメージの高さ）の変数を使用して、グラフコンテナの現在のサイズに基づいています。

は$('#chart').height()と$('#chart').width()に基づいて値を設定することを検討して確認してくださいあなたのチャート内の画像が時にビューポートの変更更新されます行うことchart.redraw()とchart.reflow()機能をテスト。

• renderer.image（）：http://api.highcharts.com/highcharts#Renderer.image
• chart.redraw（）：http://api.highcharts.com/highcharts#Chart.redraw
• chart.reflow（）：ここで

  はあなたに役に立つかもしれAPIドキュメントのいくつかのリンクですhttp://api.highcharts.com/highcharts#Chart.reflow