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

时间:2016-09-21 11:57:42

标签: highcharts

我使用按钮将图表类型从饼图切换为列并返回。 Pie是默认值。当我切换到列时,不会显示任何类别。 Image: Pie is the default

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

我尝试设置x轴类别,但只获得了Highcharts Error 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)'
                }
            },

1 个答案:

答案 0 :(得分:0)

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

$('#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/

我认为您的xAxis配置有一点问题,xAxis配置中不需要标题。请尝试替换下面的代码。

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/