forceグラフの種類を変更するときにハイチャートでアニメーションを再描画する

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... 
    } 
} 

コードは、例えばから各シリーズを変更します - line to bar、bar to areaspline、しかし、ユーザーが新しいグラフタイプに切り替えるときに "アニメーション"を取得する方法がわからないので、ユーザーがチャートを生成するのは初めてです。

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>

を助けるかもしれない迅速かつ汚い方法の下に作成

redraw後 animationを発射し、そのような機能はありません