Радар Диаграмма: метка вне графика - PullRequest
Новая
       19

Радар Диаграмма: метка вне графика

0 голосов
/ 30 апреля 2019

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

В лучшем случае они имеют метки данных (в моем примере, точка 1-5) с линией к их круговой диаграмме (как круговая диаграмма), и они расположены вертикально в середине круговой диаграммы.Поэтому я не знаю, как кодировать метки данных.

Вот моя скрипка: https://jsfiddle.net/ghu21x0e/

Highcharts.chart('container', {

        chart: {
            polar: true
        },

        title: {
            text: 'Goals'
        },

        subtitle: {
            text: 'Goals'
        },

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

        xAxis: {
            tickInterval: 72,
            min: 0,
            max: 360,
            labels: {
                format: false
            }
        },

        yAxis: {
            min: 0
        },

        plotOptions: {
            series: {
                pointStart: 0,
                pointInterval: 73,

                dataLabels: {
                    enabled: true,
                    crop: true,
                    overflow: 'none',
                    padding: 50,
                    verticalAlign: 'middle',
                    format: '{point.name}'

                }
            },
            column: {
                pointPadding: 0,
                groupPadding: 0,
                pointPlacement: 'between'
            }
        },

        series:
            [{
                type: 'column',
                name: 'Goal',
                data: [

                    {
                        name: 'Point 1',
                        y: 1
                    },
                    {
                        name: 'Point 2',
                        y: 2
                    },
                    {
                        name: 'Point 3',
                        y: 3
                    },
                    {
                        name: 'Point 4',
                        y: 4
                    },
                    {
                        name: 'Point 5',
                        y: 5
                    },

                ],
                pointPlacement: 'between'
            }]
    });

1 Ответ

0 голосов
/ 30 апреля 2019

К сожалению, разъем меток данных не поддерживается в полярной диаграмме.Однако это можно сделать с помощью дополнительной серии pie, которая находится под основной и связана с ней.Проверьте демо и код, указанный ниже.

Код: 

Highcharts.chart('container', {
  chart: {
    polar: true
  },
  title: {
    text: 'Goals'
  },
  subtitle: {
    text: 'Goals'
  },
  pane: {
    startAngle: 0,
    endAngle: 360
  },
  xAxis: {
    tickInterval: 73,
    min: 0,
    labels: {
      format: false
    }
  },
  yAxis: {
    min: 0,
    max: 5
  },
  plotOptions: {
  	series: {
    	states: {
      	inactive: {
        	opacity: 1
        }
      }
    },
    column: {
      pointStart: 0,
      pointInterval: 73,
      pointPadding: 0,
      groupPadding: 0,
      dataLabels: {
        enabled: false
      }
    }
  },
  series: [{
    type: 'pie',
    animation: false,
    linkedTo: 'main',
    size: '5%',
    dataLabels: {
    	distance: 130
    },
    states: {
    	hover: {
      	enabled: false,
        brightness: 0
      }
    },
    data: [{
      name: 'Point 1',
      y: 1
    }, {
      name: 'Point 2',
      y: 1
    }, {
      name: 'Point 3',
      y: 1
    }, {
      name: 'Point 4',
      y: 1
    }, {
      name: 'Point 5',
      y: 1
    }]
  }, {
    type: 'column',
    name: 'Goal',
    id: 'main',
    colorByPoint: true,
    animation: false,
    states: {
    	hover: {
        brightness: 0
      }
    },
    data: [{
      name: 'Point 1',
      y: 1
    }, {
      name: 'Point 2',
      y: 2
    }, {
      name: 'Point 3',
      y: 3
    }, {
      name: 'Point 4',
      y: 4
    }, {
      name: 'Point 5',
      y: 5
    }],
    pointPlacement: 'between'
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>
<div id="container"></div>

Демо:

Ссылка API:

...