Highstock,从百分比堆叠到正常堆叠动态变化

时间:2014-02-03 16:47:51

标签: highcharts

与标题一样,如果你有一个图表,每个系列都启用了百分比堆叠,然后尝试使用series.update()方法更改为正常堆叠,则它不起作用。它似乎没有做任何事情。

百分比正常示例:http://jsfiddle.net/8tbPD/

反过来确实有效。

正常百分比示例:http://jsfiddle.net/Tn3n9/

我有什么遗失的吗?

感谢。

    $('button').on('click', function() {

        for(var index in chart.series) {
            chart.series[index].update({stacking:'normal'});   
        }
    });

2 个答案:

答案 0 :(得分:0)

不幸的是,您需要销毁并创建一个新图表。

答案 1 :(得分:0)

在另一个论坛上查看此答案:http://forum.highcharts.com/highstock-usage/dynamic-update-toggle-between-value-and-percentage-t31298/

基本上,添加"堆叠"但没有数据。然后使用JavaScript显示和隐藏该系列(其stack-attribute将影响所有其他系列),例如按钮。



$(function() {
  $('#container').highcharts({
    chart: {
      type: 'area'
    },
    title: {
      text: 'Historic and Estimated Worldwide Population Distribution by Region'
    },
    subtitle: {
      text: 'Source: Wikipedia.org'
    },
    xAxis: {
      categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
      tickmarkPlacement: 'on',
      title: {
        enabled: false
      }
    },
    yAxis: {
      title: {
        text: 'Percent'
      }
    },
    tooltip: {
      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
      shared: true
    },
    plotOptions: {
      area: {
        stacking: 'normal',
        lineColor: '#ffffff',
        lineWidth: 1,
        marker: {
          lineWidth: 1,
          lineColor: '#ffffff'
        }
      }
    },
    series: [{
      name: 'Asia',
      data: [502, 635, 809, 947, 1402, 3634, 5268]
    }, {
      name: 'Africa',
      data: [106, 107, 111, 133, 221, 767, 1766]
    }, {
      name: 'Europe',
      data: [163, 203, 276, 408, 547, 729, 628]
    }, {
      name: 'America',
      data: [18, 31, 54, 156, 339, 818, 1201]
    }, {
      name: 'Oceania',
      data: [2, 2, 2, 6, 13, 30, 46]
    }, {
      showInLegend: false,
      stacking: 'percent'
    }]
  });

  // the button action
  var chart = $('#container').highcharts(),
    $button = $('#button');
  $button.click(function() {
    var series = chart.series[5];
    if (series.visible) {
      series.hide();
      $button.html('Percent');
    } else {
      series.show();
      $button.html('Normal');
    }
  });
});
&#13;
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
<button id="button">Normal</button>
&#13;
&#13;
&#13;