Highcharts,极地没有内轴

时间:2018-06-07 14:47:20

标签: highcharts

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

1 个答案:

答案 0 :(得分: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/