Question

我正在尝试创建没有内轴的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

Answer 1

为了调整第二个图表的大小，您需要将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/

Highcharts，极地没有内轴

1 个答案: