javascript - 更改图表类型时强制 Highcharts 重绘动画

Question

我有一堆默认情况下以折线图形式显示的图表。我在图表的一侧添加了按钮，以允许用户将其更改为饼图、条形图、面积样条线或返回线图。

当用户单击按钮时，它会运行此函数:

function change_graph_type(moduleNumber, type) {

  graph_type = type;

  var chart    = $('#graph' + moduleNumber).highcharts();

  for ( i=0;i<chart.series.length;i++ ) {
    chart.series[i].update({
      type      : graph_type
    });
    //chart.redraw();  //I've tried adding this here to no avail...
  } 
}

代码更改了每个系列，例如- 线到条形图，或条形图到区域样条线，但我无法弄清楚当用户切换到新图形类型时如何获取“动画”，因此它仅在用户第一次生成图表时运行。

Answer 1

我尝试了很多方法，但没有这样的函数可以在重绘后触发动画

因此创建了下面这个快速而肮脏的方法，可能会有所帮助

http://jsfiddle.net/msekpj8m/

$(function() {
    var chartOptions = {
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            showEmpty: false
        },
        chart: {
            type: 'column'
        },
        yAxis: {
            showEmpty: false
        },

        series: [{
            allowPointSelect: true,
            data: [ // use names for display in pie data labels
                ['January', 29.9],
                ['February', 71.5],
                ['March', 106.4],
                ['April', 129.2],
                ['May', 144.0],
                ['June', 176.0],
                ['July', 135.6],
                ['August', 148.5], {
                    name: 'September',
                    y: 216.4,
                    selected: true,
                    sliced: true
                },
                ['October', 194.1],
                ['November', 95.6],
                ['December', 54.4]
            ],
            marker: {
                enabled: false
            },
            showInLegend: true
        }]
    };
    var container = $('#container');
    container.highcharts(chartOptions);

    // Set type
    $.each(['line', 'column', 'spline', 'area', 'areaspline', 'scatter', 'pie'], function(i, type) {
        $('#' + type).click(function() {
            container.highcharts().destroy();
            chartOptions.chart.type = type;
            container.highcharts(chartOptions);
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

<button id="column" style="margin-left: 2em">Column</button>
<button id="line">Line</button>
<button id="spline">Spline</button>
<button id="area">Area</button>
<button id="areaspline">Areaspline</button>
<button id="scatter">Scatter</button>
<button id="pie">Pie</button>