Highcharts - “射箭场”图表？

Question

我应该选择制作“射箭场”图表（叠圆图表）的图表？即中心区域得分最高，下一圈得分稍低等等。

我认为Polar图表最接近，但可能存在更精确的匹配？

标签：射箭射程图，飞镖图

Answer 1

如果你想只显示圈子，也许你可以使用饼图？

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]
      ],
    }]
  });
});

http://jsfiddle.net/rsLnxL04/