внутренний радиус полярный Highcharter

Я пытаюсь изменить внутренний радиус полярной диаграммы с помощью highcharter, чтобы я мог визуализировать данные, наведя всплывающую подсказку, как в этих удивительных D3 диаграммах из _ 3_.

Я знаю, что можно визуализировать данные с помощью solid gauge, как в этом примере , но я хочу, чтобы данные были видны в polar.

Я пробовал изменить параметры innerSize и innerRadius, но мне это не удалось.

Вот мой R код:

library(tidyverse)
library(highcharter)
highchart() %>% 
  hc_chart(polar = T, type = "bar") %>% 
  hc_title(text = "Athlete 1 vs Athlete 2") %>% 
  hc_xAxis(categories = c("Total Score", "Avg. Score", "Sum Score",
                          "Best Score"),
           tickmarkPlacement = "on",
           plotLines = list(
             list(label = list(
               rotation = 90))
             )
           ) %>% 
  hc_yAxis(min = 0) %>% 
  hc_series(
    list(
      name = "Athlete 1",
      data = c(43000, 19000, 60000, 35000)
    ),
    list(
      name = "Athlete 2",
      data = c(50000, 39000, 42000, 31000)
    )
  ) %>% 
  hc_colors(c("firebrick", "steelblue"))

Желаемый результат будет примерно таким: введите описание изображения здесь

Спасибо!

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

После ответа @ppotaczek я обновил его диаграмму, поэтому желаемое обновление будет выглядеть так:

введите описание изображения здесь


r highcharts r-highcharter
person patL    schedule 13.08.2018    source источник
comment
@ewolden Спасибо! Это похоже, но не то, что я хочу, так как это круговая диаграмма. Если вы посмотрите на ссылку fivethirtyeight, вы увидите данные из диаграммы внутри панели.   -  person patL    schedule 13.08.2018
comment
Я могу сделать полярную диаграмму ... Если вы выполните мой R код, вы увидите. Но я не могу сделать так, чтобы данные были видны на панели диаграммы, как в примере Fivethirtyeight.   -  person patL    schedule 13.08.2018
comment
Хорошо, тогда я не уверен. Я знаком с Highcharts, а не с R   -  person ewolden    schedule 13.08.2018

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы добиться аналогичного результата в полярной диаграмме Highcharts, вы должны установить для pointPadding и groupPadding значение 0. Чтобы создать пустое пространство в середине графика, вы можете использовать Highcharts.SVGRenderer и смещение для оси y.

Highcharts.chart('container', {
    chart: {
        polar: true,
        type: 'bar',
        events: {
            render: function() {
                var chart = this,
                    middleElement = chart.middleElement;

                if (middleElement) {
                    middleElement.destroy();
                }

                chart.middleElement = chart.renderer.circle(chart.plotSizeX / 2 + chart.plotLeft, chart.plotHeight / 2 + chart.plotTop, 20).attr({
                    zIndex: 3,
                    fill: '#ffffff'
                }).add();
            }
        }
    },
    yAxis: {
        offset: 20
    },

    series: [{
        pointPadding: 0,
        groupPadding: 0,
        name: "Athlete 1",
        data: [43000, 19000, 60000, 35000]
    }, {
        pointPadding: 0,
        groupPadding: 0,
        name: "Athlete 2",
        data: [50000, 39000, 42000, 31000]
    }]
});

Живая демонстрация: http://jsfiddle.net/BlackLabel/y6uL180j/

Справочник по API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#circle

РЕДАКТИРОВАТЬ: чтобы отобразить значение из зависшей точки в середине диаграммы, используйте всплывающую подсказку с соответствующими параметрами:

tooltip: {
    borderWidth: 0,
    backgroundColor: 'none',
    shadow: false,
    style: {
        fontSize: '16px'
    },
    headerFormat: '',
    pointFormatter: function() {
        return this.y / 1000 + 'k'
    },
    positioner: function(labelWidth, labelHeight) {
        return {
            x: (this.chart.plotSizeX - labelWidth) / 2 + this.chart.plotLeft,
            y: (this.chart.plotSizeY - labelHeight) / 2 + this.chart.plotTop
        };
    }
}

Живая демонстрация: http://jsfiddle.net/BlackLabel/5ybhtrmz/

person ppotaczek    schedule 13.08.2018
comment
Спасибо! Думаю, мой вопрос был непонятным. Я добавил изображение на основе диаграммы, которую вы отправили, но в желаемом результате не хватает единственной мысли. Спасибо! - person patL; 13.08.2018
comment
Привет, patL, я отредактировал ответ, проверьте результат сейчас. - person ppotaczek; 13.08.2018
comment
Большое спасибо! Это как раз то, что хотел !! Я бы проголосовал за ваш ответ 10 раз! - person patL; 13.08.2018
comment
Только что просмотрел valueSuffix < / a>, поэтому вы можете добавить k в суффикс всплывающей подсказки. - person patL; 14.08.2018