javascript - 更新图表类型时出现奇怪的比例变化

Question

我有一个人口金字塔图，以每个性别为系列。用户需要能够更改系列图表类型。默认为条形，他们希望能够更改为线形。我创建了一个可以更改图表类型的函数。这是可行的，但是“向左”(或负值)的系列有一个非常奇怪的值/比例变化。如果我隐藏右侧系列，则左侧系列值/比例将得到纠正。显示正确的系列，图表看起来又不一样了。如果我改回条形类型系列，那么该系列看起来是正确的。

我的更改图表系列类型的代码:

  var mainGraphFormatType = $('#ddlGraphFormatDropDown');

  mainGraphFormatType.change(function() {
    var chartM = $('#container').highcharts();
    if ($(this).val() != 'null') {
      var selType = $(this).val().toLowerCase();
      if (selType == 'scatter') {
        selType = 'line';
      }
      changeType(chartM, selType);
    }
  });

  function changeType(chart, newType) {
    newType = newType.toLowerCase();
    var serie = chart.series;
    for (i = 0; i < chart.series.length; i++) {
      var item = serie[i];
      item.update({
        type: newType
      });
      var isLegendOn = chart.legend.options.enabled;
      if (isLegendOn) {
        if (!item.showInLegend) {
          item.update({
            showInLegend: true
          });
          item.options.showInLegend = true;
          chart.legend.renderItem(item);
          chart.legend.render();
        }
      }
    }
    changeChartTypeSingSeries(chart);
  }

  function changeChartTypeSingSeries(chart) {
    var serie = chart.series;
    for (i = 0; i < chart.series.length; i++) {
      var item = serie[i];
      if (!item.visible) {
        item.hide();
      }
    }
  }

我已经从 highcharts 演示金字塔图表 here 复制了这个问题.

Answer 1

在 render 事件上交换堆叠属性的解决方法:

chart: {
  type: 'bar',
  events: {
    render: function() {
      var chart = this,
        series = chart.series[0],
        options = chart.options,
        stacking = options.plotOptions.series.stacking;

      if (stacking === 'normal' && series.type === 'line') {
        chart.update({
          plotOptions: {
            series: {
              stacking: ''
            }
          }
        });
      } else if (stacking === '' && series.type === 'bar') {
        chart.update({
          plotOptions: {
            series: {
              stacking: 'normal'
            }
          }
        });
      }
    }
  }
}

演示: https://jsfiddle.net/BlackLabel/hdL7eb9x/