javascript - (Highcharts) 极坐标图中的多边形壳

Question

我不确定如何处理此图表，我试图使其尽可能接近，但由于有太多选项需要修改，我不知所措。

我正在尝试在 highcharts 中制作此图表。

到目前为止，我得到的这种图表是极坐标图，这是我所做的。

$(function() {
  var data = {
    data  : [1,2,3,4,5,5],
    labels: ['text 1','text 2','text 3','text 4','text 5','text 6']
  };
  var counter = 0
  $('#container').highcharts({
    chart: {
      polar: true
    },

    title: {
      text: 'Demo Chart'
    },

    pane: {
      startAngle: 0,
      endAngle: 360
    },

    xAxis: {
      tickInterval: 60,
      min: 0,
      max: 360,
      categories: data.labels,
      labels: {
        useHTML: true,
        formatter: function() {
          var html;
          html = "<div style='text-align:center'>";
          html += "<p style='margin:0em'>";
          html += data.data[counter];
          html += "</p>";
          html += "<p style='margin:0em'>";
          html += data.labels[counter];
          html += "</p>";
          html += "</div>";
          counter++;
          return html;
        }
      }
    },

    yAxis: {
      min: 0,
      max: 5,
      labels:{
        enabled: false
      }
    },

    plotOptions: {
      series: {
        pointStart: 0,
        pointInterval: 60
      }
    },

    series: [{
      type: 'area',
      name: '',
      showInLegend: false,
      data: [
        {name:'対話⼒力力',y:1},
        {name:'Test 2',y:2},
        {name:'Test 3',y:3},
        {name:'Test 4',y:4},
        {name:'Test 5',y:5},
        {name:'Test 6',y:5}
      ]
    }]
  });
});

http://codepen.io/abarcenas29/pen/MywYGP

这是我的问题:

1. 如何将 4.3 插入到图表正中心的图像中？

编辑:我能够使图表看起来像图像，所以我编辑了我的问题。

Answer 1

1) 设置yAxis.gridLineInterpolation到多边形

2) 您可以使用只有一个点的单独系列，其中 x = 0 和 y = 0。然后使用series.dataLabels.formatter将该值作为数据标签返回。或者简单地使用 Chart.renderer在那里渲染文本/标签。