Highcharts 极坐标图定制

Question

我在极坐标图自定义方面遇到问题。我想将数据标签向右移动 45°。

这是fiddle，这是我想要得到的结果：

1. 是否可以使用极坐标图来做到这一点（必须是极坐标图）？

2. 这是定义标签文本的正确方法吗？

   var categories = ['These', 'are', 'test', 'data'],
   count = 0;
   /* ... */
       labels: {
           formatter: function () {
               var value = categories[count];
   
               count++;
               if (count == 5) {
                   count = 0;
               }
   
               return value;
           }
       }
   

Answer 1

获得您想要的行为是两件事的结合：

• 使用

  xAxis.categories

  而不是

  formatter

  ：这比创建自定义格式化程序更容易。 如果您愿意，可以省略此步骤，具体取决于您想要绘制网格线的位置。
• 在您的

  series

  选项中，将

  pointPlacement

  设置为

  between

  ：默认情况下，点将面向“北”放置，但启用此选项后，它们将被放置在中间（对于带有四个值，它会将它们置于 45 度）。

例如：

var categories = ['These', 'are', 'test', 'data'],
count = 0;

$('#container').highcharts({
    // ...        
    xAxis: {
        // ...
        categories: categories,
        // ...
    },
    // ...
    series: [{
        // ...
        pointPlacement: 'between',
        // ...
    }]
});

Answer 2

据我所知，有一个选项 startAngle 它使您能够操纵角度，只需添加此选项，如下所示：

 chart: {
            polar: true
        },
        pane: {
            startAngle: 45,
        },

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

小提琴

API

Answer 3

const options = {
  scales: {
              r: { 
                pointLabels: {
                  display: true,
                  callback: function (label: string) {
                    return label;  
                  },
                  centerPointLabels: true, 
                }, 
              },
            },

}

那里

centerPointLabels: true

为我完成了这项工作。