javascript - 如何在 Highcharts 中定位 Axis 标签

Question

我有附上图表输出。

如何将 Axis 的名称准确地放在 Axis 上，而不是将其定位在 Axis 之间(即:N、E、S、W)。

JS代码如下:

window.chart = new Highcharts.Chart({

                    chart: {
                        renderTo: 'container2',
                        polar: true,
                        type: 'column'
                    },

                    title: {
                        text: '24-Hours Wind Speed and Direction Chart'
                    },

                    pane: {
                        startAngle: 0,
                        endAngle: 360,
                        size: '85%'
                    },
                    legend: {
                        reversed: true,
                        enabled: false,
                        align: 'right',
                        verticalAlign: 'top',
                        y: 100,
                        layout: 'vertical'
                    },
                    xAxis: {
                        type: "",
                        categories: sorted_names,           
                        labels: {
                            formatter: function () {
                                return this.value + '°';
                            }
                        }
                    },

                    yAxis: {
                        min: 0,
                        endOnTick: true,
                        showLastLabel: false
                    },

                    plotOptions: {
                        series: {
                        //   pointStart: 0,
                        //     pointInterval: 90
                       //   pointPlacement: 'between'
                        },
                        column: {
                            pointPadding: 0,
                            groupPadding: 0
                        }
                    },

                    series: series

                });

有谁可以帮我解决这个问题吗？提前致谢。

Answer 1

我相信您正在寻找 tickMarkPlacement option 的组合和 pointPlacement选项。

xAxis: {
    tickmarkPlacement: 'on', // add this!
    type: "",
    categories: sorted_names,           
    labels: {
        formatter: function () {
            return this.value + '°';
        }
    }
},

在绘图选项中:

plotOptions: {
   series: {
       pointPlacement: 'on' // add this !
   },
   column: {
       pointPadding: 0,
       groupPadding: 0
   }
},

这是一个fiddle demonstration .