Bootstrap+HighCharts.js 响应式图像在圆环图中的位置

Question

我需要在圆环图中插入一张图片，但是当使用 bootstrap 并且当它变得有响应时，图片的位置超出了圆环图。我想让图片位于圆环图的中心，我该怎么做？

示例代码：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() 函数以确保图表中的图像在视口时得到更新变化。

API 文档中的一些链接可能对您有所帮助：

• renderer.image(): http://api.highcharts.com/highcharts#Renderer.image
• chart.redraw(): http://api.highcharts.com/highcharts#Chart.redraw
• chart.reflow(): http://api.highcharts.com/highcharts#Chart.reflow