Highcharts，无内轴的极坐标

debugcn 发表于 Dev

一沙罗

我正在尝试创建没有内轴的 Polar Highchart（在里面制作空饼）。其他人在这里提出了类似的问题，解决方案如下：

this.options = {
    chart: {
        renderTo: 'container',
        type: 'pie'
    },
    title: {
        text: 'Browser market share, April, 2011'
    },
    series: [{
        name: 'Browsers',
        data: [["Firefox",6],["MSIE",4],["Chrome",7]],
        size: '60%',
        innerSize: '20%',
        showInLegend:true,
        dataLabels: {
            enabled: false
        }
    }]
};

http://jsfiddle.net/HpdwR/

有没有人在这样的图表中达到同样的效果：

this.options = {
    chart: {
        type: 'column',
        polar: true
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
    }]
};

http://plnkr.co/edit/HCbX8kxvhCDxww3HWiG5?p=preview

丹尼尔斯

为了调整第二个图表的大小，您需要将pane.size参数设置为等于series.size第一个图表饼系列的值，就像这样：

       this.options = {
          chart: {
            type: 'column',
            polar: true
          },
          series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
          }],
          pane: {
            size: '60%'
          }
        };

API 参考：https : //api.highcharts.com/highcharts/pane.size

现场示例：http : //plnkr.co/edit/TZiv6POxjmaemk6cpBJc?p=preview

= = = =

编辑

在获得更多指定信息后（在下面的评论中），答案已经完全改变了。我们没有在极坐标图类型中实现这样的功能。

但是，一切都没有丢失，因为您可以通过添加一些自定义代码来获得这种效果。

首先，您需要在图表中心渲染圆，renderer在chart.load事件上使用对象：

           events: {
              load: function() {
                var chart = this
                var center = [chart.chartWidth / 2, chart.chartHeight / 2]
                // Render custom circle on the center of the chart
                chart.renderer.circle(center[0], center[1], 45)
                    .attr({
                    fill: '#fff',
                    stroke: '#ddd',
                    'stroke-width': 1,
                    zIndex: 6 // Set Z iIndex smaller than zIndex of yAxis Labels to avoid overlapping
                  })
                    .add()
              }
           }

然后，您需要稍微调整 yAxis，即设置Axis.min等于某个负值，使0刻度位于绘图区域的可见部分的中间。

    yAxis: {
        min: -130
    }

最后，您需要yAxis使用labels.formatter函数隐藏第一个标签：

    yAxis: {
        min: -130,
        labels: {
            // Hide first axis label
            formatter: function() {
                return this.isFirst ? '' : this.value 
            }
        }
    }

实例：https : //jsfiddle.net/zps287e1/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。