更新图表类型时奇怪的比例变化答案

【问题标题】：Odd Scale Change When Updating Chart Type更新图表类型时奇怪的比例变化
【发布时间】：2018-12-04 13:18:17
【问题描述】：

我有一个人口金字塔图表，其中每个性别作为系列。用户需要能够更改系列图表类型。默认值为 bar，他们希望能够更改为 line。我创建了一个可以更改图表类型的函数。这可行，但是“向左”（或负值）的系列具有非常奇怪的值/比例变化。如果我隐藏了正确的系列，那么左系列的值/比例就会得到纠正。显示正确的系列，图表再次消失。如果我改回条形系列，那么该系列看起来是正确的。

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

  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 复制了这个问题。

【问题讨论】：

似乎是因为stacking: 'normal' 而发生的，如果您评论该行看起来正常。
@ewolden，好吧，我可以删除它，但这会给代码增加很多复杂性。图表类型选择是我们所有图表中使用的通用控件/方法。这是我们第一次添加需要堆叠的负+正值的人口金字塔。将检查我是否可以获得堆叠选项并在必要时进行更改。但是，这会影响系列的对齐方式。
我并不是要建议您删除它。我只是指出我认为是什么导致了它的行为方式，以便更多人可以尝试找出解决方法。

标签： javascript highcharts

【解决方案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/

【讨论】：

我认为可以使用的变体。需要检查我正在创建什么样的图表并根据需要添加chart.events.render 函数。