Названия категорий и диаграммы не выровнены в полярной диаграмме, Highcharts - PullRequest
0 голосов
/ 04 июля 2019

Если я не добавлю категории, по умолчанию они будут нумерованы от 0 до n, и эти номера будут выровнены по линиям, начинающимся с центра.

xAxis: {
  /*  categories: ['teemo', 'ryze', 'yasuo', 'vayne', 'maokai', 'poppy'] */
},

Когда имена категорий присутствуют, они будут помещены между этими строками. Можно ли разместить их как тот, который имеет нумерацию по умолчанию

https://jsfiddle.net/fps38oyr/

Highcharts.chart('container', {

  chart: {
    polar: true
  },

  title: {
    text: 'Highcharts Polar Chart'
  },

  subtitle: {
    text: 'Also known as Radar Chart'
  },

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

  xAxis: {
    categories: ['teemo', 'ryze', 'yasuo', 'vayne', 'maokai', 'poppy']
  },

  yAxis: {
    min: 0
  },

  series: [{
    type: 'column',
    name: 'Column',
    data: [8, 7, 6, 5, 4, 3],
    pointPlacement: 'between'
  }, {
    type: 'line',
    name: 'Line',
    data: [1, 2, 3, 4, 5, 6]
  }, {
    type: 'area',
    name: 'Area',
    data: [1, 8, 2, 7, 3, 6]
  }]
});
<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/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; max-width: 400px; height: 400px; margin: 0 auto"></div>

1 Ответ

1 голос
/ 04 июля 2019

In можно легко сделать с помощью одного из следующих подходов:

  1. набор категорий и xAxis.tickmarkPlacement = 'on'

  xAxis: {
    categories: ['teemo', 'ryze', 'yasuo', 'vayne', 'maokai', 'poppy'],
    tickmarkPlacement: 'on'
  }
  1. используйте xAxis.labels.formatter обратный вызов для обмена номерами с категориями.

  var categories = ['teemo', 'ryze', 'yasuo', 'vayne', 'maokai', 'poppy'];
  ...

  xAxis: {
    labels: {
      formatter: function() {
        return categories[this.value];
      }
    }
  }

Демонстрации:

Справочник по API:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...