Highchart, динамически изменять тип диаграммы

Question

HTML

<div id="top10_" style="float:left"> 
     <strong>Top10:</strong> 
     <select id="top10_update"> 
      <option value="typ">Typ</option> 
      <option value="kategoria">Kategoria</option> 
      <option value="typ2 selected="selected" >Typ2</option> 
      <option value="usluga">usługa</option> 
     </select> 

     <img id="set_column" src="static/images/chart-bar-icon.png" width="20" /> 
     <img id="set_pie" src="static/images/chart-pie-icon.png" width="20" /> 
     <img id="set_area" src="static/images/Chart-Graph-Ascending-icon.png" width="20" /> 
     <img id="set_line" src="static/images/chart_curve.png" width="20" /> 

    </div> 
<div id="top10" style="min-width: 400px; height: 400px; margin: 0 auto;"></div> 

JS

$('#set_column').click(function() { 
    var chart = $(this).parent('div').attr('id'); 
    chart = chart.replace('_',''); 
    $('#'+chart).highcharts().series[0].update({ type: "column"}); 
}); 
$('#set_pie').click(function() { 
    var chart = $(this).parent('div').attr('id'); 
    chart = chart.replace('_',''); 
    $('#'+chart).highcharts().series[0].update({ type: "pie"}); 
}); 
$('#set_area').click(function() { 
    var chart = $(this).parent('div').attr('id'); 
    chart = chart.replace('_',''); 
    $('#'+chart).highcharts().series[0].update({ type: "area"}); 
}); 
$('#set_line').click(function() { 
    var chart = $(this).parent('div').attr('id'); 
    chart = chart.replace('_',''); 
    $('#'+chart).highcharts().series[0].update({ type: "line"}); 
}); 

и картировать

$('#top10').highcharts({ 
    chart: { 
     type: 'column', 
     margin: [ 50, 50, 100, 80] 
    }, 
    title: { 
     text: 'TOP10' 
    }, 
    subtitle: { 
     text: ' ' 
    }, 
    credits: { 
     enabled: false 
    }, 
    xAxis: { 
     categories: [], 
      labels: { 
       rotation: -45, 
       align: 'right', 
       style: { 
        fontSize: '13px', 
        fontFamily: 'Verdana, sans-serif' 
       } 
      } 
     }, 
    yAxis: { 
     min: 0, 
      title: { 
       text: 'Ilość' 
      } 
    }, 
    legend: { 
     enabled: false 
    }, 
    tooltip: { 
     formatter: function() { 
      return '<b>'+ this.x +'</b><br/>'+ 
       'Ilość: '+ this.y; 
     } 
    }, 
    series: [{ 
     name: 'Ilość, TOP10', 
     data: [], 
     dataLabels: { 
      enabled: true, 
      rotation: -90, 
      color: '#FFFFFF', 
      align: 'right', 
      x: 4, 
      y: 10, 
       style: { 
        fontSize: '13px', 
        fontFamily: 'Verdana, sans-serif' 
       } 
     } 
    }] 
}); 

, как вы можете видеть, что это имеет пустые данные, поскольку данные загружаются динамически с помощью AJAX

function ajax_update(date) { 
    $.ajax({ 
     url: "index.php/ajax", 
     async: false, 
     method: 'post', 
     dataType: "json", 
     data: {date:date}, 
     beforeSend: function(){ 
      $('#loading').show(); 
      $('#top10').highcharts().showLoading(); 
     }, 
     success: function(dane) { 
      $('#top10').highcharts().xAxis[0].setCategories(dane.top10.xlabel, false); 
      $('#top10').highcharts().series[0].setData(dane.top10.data); 
      $('#top10').highcharts().setTitle(null, { text: 'Dane za: '+date.replace('^', ' - ') }); 

      $('#top10').highcharts().hideLoading(); 
      $('#loading').hide(); 
     }, 
     error: function (dane) { 
      alert(dane.responseText); 
     } 
    }); 
} 

проблема заключается в том, что при нажатии на иконку, чтобы изменить тип данных диаграммы на диаграмме исчезают и при обновлении его, используя вышеупомянутую функцию снова показывает, с помощью модифицированного типа

живой, рабочий пример является здесь : http://jsfiddle.net/zqvNq/1/ , но, как я сказал, у меня есть пустые данные и добавить его в график с JSON

Answer 1

вот пример того, как я это исправить:

var global_highcharts = new Object(); 
    function ajax_update_chart(level, date, co) { 
     $.ajax({ 
      url: "index.php/ajax/"+co, 
      async: false, 
      method: 'post', 
      dataType: "json", 
      data: {date:date, level:level}, 
      beforeSend: function(){ 
       $('#loading').show(); 
       $('#'+co.substr(7)).highcharts().showLoading(); 
      }, 
      success: function(dane) { 
       $.each(dane, function(i) { 
        global_highcharts[i+'Cat'] = this.categories; 
        global_highcharts[i+'Dat'] = this.data; 

        $('#'+i).highcharts().xAxis[0].setCategories(this.categories, false); 
        $('#'+i).highcharts().series[0].setData(this.data); 
        $('#'+i).highcharts().hideLoading(); 
       }); 
       //ustawiamy domyślne wartości które w main.php mają ustawione selected aby nie mylić ludzi na stronie 
       $('#loading').hide(); 
       //console.log(global_highcharts); 
      }, 
      error: function (dane) { 
       alert(dane.responseText); 
      } 
     }); 
    } 

$.each(['line', 'column', 'spline', 'area', 'areaspline', 'scatter', 'pie'], function (i, type) { 
    $('#' + type).click(function() { 
     var chartaz = $('#top10').highcharts(); 
     chartaz.series[0].update({ 
      type: type 
     }); 
      $('#top10').highcharts().xAxis[0].setCategories(global_highcharts.top10Cat , false); 
      $('#top10').highcharts().series[0].setData(global_highcharts.top10Dat); 
    }); 
}); 

просто добавляя данные после Побейте