从饼图切换到列并显示标签

Question

我使用按钮将图表类型从饼图切换到列和背面。 Pie是默认的。当我切换到列时，没有显示类别。 Image: Pie is the default

这里是一个小提琴：http://jsfiddle.net/Gebifa/vLrx47a6/1/

我已位于试图设置x轴的类别，但只得到了Highcharts错误18 - 请求的轴不存在。有谁知道如何显示标签？提前致谢。

exporting: { 
      buttons: { 
       contextButton: { 
        symbol: 'url(../../img/chartexport.png)' 
       }, 
       barButton: { 
        x: -30, 
        _titleKey: 'barChart', 
        onclick: function() { 
         $.each(this.series,function(i,serie){ 
          serie.update({ 
           type:'column', 
           tooltip: { 
            positioner: function() { 
             return { x: 0, y: 0 }; 
            }, 
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>', 
            shared: true 
           } 
          }); 
         }); 
        }, 
        symbol: 'url(../../img/chartButtonBar.png)' 
       }, 
       pieButton: { 
        x: -60, 
        _titleKey: 'pieChart', 
        onclick: function() { 
         $.each(this.series,function(i,serie){ 
          serie.update({ 
           type:'pie', 
           tooltip: { 
            positioner: function() { 
             return { x: 0, y: 0 }; 
            }, 
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.2f}%</b><br/>', 
            shared: true 
           } 
          }); 
         }); 
        }, 
        symbol: 'url(../../img/chartButtonPie.png)' 
       } 
      }, 

Answer 1

这可能会帮助您在两个图表之间切换。如果问题没有解决，请提供小提琴。

$('#Pie').click(function() { 
    chart.inverted = true; 
    chart.xAxis[0].update({}, false); 
    chart.yAxis[0].update({}, false); 
    chart.series[0].update({ 
     type: 'pie' 
    }); 
} 

http://jsfiddle.net/wvymmy80/

我觉得你的X轴配置有一个小问题，是不是在X轴configuration.Please尝试更换下面的代码所需的标题。

xAxis: { 
     categories: ["20-29 years", "30-39 years", "40-49 years", "50-59 years", "60-69 years", ], 
     enabled: false, 
     text: '', 
     style: { 
     color: '#656565' 
     }, 
    tickmarkPlacement: 'between', 
    labels: { 
     style: { 
     color: '#656565' 
     }, 
     rotation: 0 
    }, 
    crosshair: true 
    }, 

小提琴：http://jsfiddle.net/xxLochh6/