Highcharts - “射箭范围”图表?
问题描述:
我应该选择什么图表来制作“射箭范围”图表(堆积圆图)?即中部地区是最高分,下一圈有点少,等等。Highcharts - “射箭范围”图表?
我认为极地图是最接近的,但也许更精确的匹配存在?
标签:射箭图,图表镖
答
如果你想只显示圈,也许你可以用饼图?
series: [{
name: 'outer',
data: [1],
size: '60%',
borderColor: null,
color: 'green',
colorByPoint: false,
}, {
name: 'middle',
data: [1],
size: '80%',
innerSize: '60%',
color: 'red',
colorByPoint: false,
borderColor: null,
borderWidth: 1
}, {
name: 'inner',
data: [1],
size: '20%',
color: 'blue',
colorByPoint: false,
borderColor: null,
borderWidth: 1
}]
http://jsfiddle.net/8fec7zao/2/
如果你想在图表上显示的点为好,极坐标图将是最好的主意。在这里你可以找到一个例子是如何工作的:
$(function() {
$('#container').highcharts({
chart: {
polar: true
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
min: 0,
max: 8,
},
yAxis: {
min: 0,
max: 12,
tickInterval: 4,
plotBands: [{
from: 0,
to: 4,
color: 'green',
}, {
from: 4,
to: 8,
color: 'yellow',
}, {
from: 8,
to: 12,
color: 'red',
}]
},
series: [{
type: 'scatter',
color: 'black',
data: [
[1, 2],
[3, 4],
[2.4, 6]
],
}]
});
});
饼图更接近。因为它在悬停节时突出显示。但它没有像15,10,5这样的标签。非常感谢,我将自己配置其余部分。 –
也Gauge图表可能会工作,但不知道如何显示dataLabels。 http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-activity/然而,我已经执行任务使用你的饼图,谢谢。 –