怎么通过js来实现打靶图展示的效果

[年轻帅小伙]

自己有尝试用 highcharts 来尝试，但是自己不会设置内圈的环数，并且打靶图内环到外环是由大到小，highcharts 插件设置 min、max 值后产生的值是内环小，外环大，所以...
求大神帮忙解决问题，java 、 C# 、 js 都行。
同心圆就好。~~

[年轻帅小伙]

如果没头绪的，可以看看这个图。。。

[街头小贩]

1.环可以用css画圆，一个一个套,哪个绿色的底图可以用图片作底 2.打中的点，可以根据环的位标点来识别

[斯洛文尼亚旅游]

你这种不需要用highchart，不就画圆而已，1#，2#都可以，主要是数学要好。。嘿嘿。。

[年轻帅小伙]

我用 highchart 处理成这样了， 现在就是把背景弄上去，大小不适应， 现在在找怎么把它的圆的大小设置成和背景一样大小。

[年轻帅小伙]

引用 2 楼 xiaofanku 的回复:

1.环可以用css画圆，一个一个套,哪个绿色的底图可以用图片作底 2.打中的点，可以根据环的位标点来识别

这个也有考虑过， 但是就是对于打中的点，不知道怎么处理。

[斯洛文尼亚旅游]

引用 6 楼 a448410274 的回复:

我用 highchart 处理成这样了， 现在就是把背景弄上去，大小不适应， 现在在找怎么把它的圆的大小设置成和背景一样大小。

你用背景更加好办了。。容器relative定位，点用图片来弄absolute定位，自己计算下点和圆心的记录就好了

[天际的海浪]

打靶图可以用 canvas 画同心圆 环数不就是靶心与打击点的距离么，用勾股定理计算即可。

[qq_43707648]

可以把用highcharts做靶图的代码发一份吗