类别名称和图表在极坐标图中未对齐,Highcharts

时间:2019-07-04 06:30:39

标签: javascript highcharts

如果我不添加类别,则默认情况下将其从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 个答案:

答案 0 :(得分:1)

使用以下方法之一可以轻松完成输入:

  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参考: