Highcharts, полярный без внутренней оси

Question

Я пытаюсь создать Polar Highchart без внутренней оси (сделать пустой круг внутри).Был похожий вопрос, заданный кем-то еще здесь, с решением вроде:

this.options = {
    chart: {
        renderTo: 'container',
        type: 'pie'
    },
    title: {
        text: 'Browser market share, April, 2011'
    },
    series: [{
        name: 'Browsers',
        data: [["Firefox",6],["MSIE",4],["Chrome",7]],
        size: '60%',
        innerSize: '20%',
        showInLegend:true,
        dataLabels: {
            enabled: false
        }
    }]
};

http://jsfiddle.net/HpdwR/

Кто-нибудь достиг такого же эффекта на графике, как этот:

this.options = {
    chart: {
        type: 'column',
        polar: true
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
    }]
};

http://plnkr.co/edit/HCbX8kxvhCDxww3HWiG5?p=preview

Answer 1

Чтобы настроить размер второй диаграммы, вам нужно установить параметр pane.size равным значению series.size первой серии круговых диаграмм, вот так:

       this.options = {
          chart: {
            type: 'column',
            polar: true
          },
          series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
          }],
          pane: {
            size: '60%'
          }
        };

APIСсылка: https://api.highcharts.com/highcharts/pane.size

Пример в реальном времени: http://plnkr.co/edit/TZiv6POxjmaemk6cpBJc?p=preview

= = = =

РЕДАКТИРОВАТЬ

После получения более указанногоинформация (в комментариях ниже), ответ полностью изменился.У нас нет такой функции, реализованной в типе полярной диаграммы.

Однако не все потеряно, потому что вы можете получить этот эффект, добавив некоторый пользовательский код.

Во-первых, вам нужновизуализируйте круг в центре диаграммы, используя объект renderer для события chart.load:

           events: {
              load: function() {
                var chart = this
                var center = [chart.chartWidth / 2, chart.chartHeight / 2]
                // Render custom circle on the center of the chart
                chart.renderer.circle(center[0], center[1], 45)
                    .attr({
                    fill: '#fff',
                    stroke: '#ddd',
                    'stroke-width': 1,
                    zIndex: 6 // Set Z iIndex smaller than zIndex of yAxis Labels to avoid overlapping
                  })
                    .add()
              }
           }

Затем вам нужно немного отрегулировать yAxis, а именно установить Axis.min равным некоторому отрицательному значению, чтобы сделать отметку 0, расположенную в середине видимой части области графика.

    yAxis: {
        min: -130
    }

В конце вам необходимо спрятать первую метку yAxis, используя функцию labels.formatter:

    yAxis: {
        min: -130,
        labels: {
            // Hide first axis label
            formatter: function() {
                return this.isFirst ? '' : this.value 
            }
        }
    }

Живой пример: https://jsfiddle.net/zps287e1/