highcharts jquery dynamiczna zmiana typu wykresu kolumna na pasek

Question

Próbuję zmienić typ wykresu za pomocą jquery.

mogę znaleźć drogę do zmiany dinamically rodzaj papieru (bez odtwarzania nowy wykres) za pomocą funkcji:

szereg [I] .update ({typ: charttype});

Moje pierwsze pytanie brzmi: Czy istnieje sposób na zmianę całego wykresu, a nie tylko serii? Jeśli nie czytaj dalej :)

Ale dzięki tej funkcji nie jestem w stanie uruchomić wykresu słupkowego. Działa jak wykres kolumnowy. Jak widać, przykładowy plik działa jak wyjątek.

bar: http://www.highcharts.com/demo/bar-basic

Jak to działa (przykład próbki):

<div id="top10_" style="float:left"> 
    <button id="set_column">column</button> 
    <button id="set_bar">bar</button> 
    <button id="set_pie">pie</button> 
</div> 
<div id="top10" style="min-width: 400px; height: 400px; margin: 0 auto;"></div> 

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

Highcharts utworzenia:

$('#top10').highcharts({ 
    chart: { 
     type: 'column', 
     margin: [50, 50, 100, 80] 
    }, 
    title: { 
     text: 'TOP10' 
    }, 
    subtitle: { 
     text: ' ' 
    }, 
    credits: { 
     enabled: false 
    }, 
    xAxis: { 
     categories: ['1', '2', '3', '4'], 
     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ść zgłoszeń, TOP10', 
     data: [1, 2, 3, 43], 
     dataLabels: { 
      enabled: true, 
      rotation: -90, 
      color: '#FFFFFF', 
      align: 'right', 
      x: 4, 
      y: 10, 
      style: { 
       fontSize: '13px', 
       fontFamily: 'Verdana, sans-serif' 
      } 
     } 
    }] 
}); 

Oto skrzypce przykład: http://jsfiddle.net/supergg/zqvNq/4/

Dziękujemy,

Answer 1

Możesz użyć odwróconego parametru na wykresie i zaktualizować yAxis. http://jsfiddle.net/n9xkR/8/

$('#bar').click(function() { 


    chart.inverted = true; 
    chart.xAxis[0].update({}, false); 
    chart.yAxis[0].update({}, false); 
    chart.series[0].update({ 
     type: 'column' 
    }); 

}); 

Answer 2

Nie wiesz znaleźć odpowiedź jeszcze, czy nie, ale znalazłem jeden link, który jest 101% przydatna nawet w przyszłości. Więc możesz popatrzeć proszę. Szukałem czegoś innego i znalazłem ten link, a także dostałem twoje pytanie.

[http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-update/][1] 

Poinformuj mnie lub przyjmij moją odpowiedź, jeśli to ci pomoże w jakikolwiek sposób. Pozdrawiam :)

Answer 3

Działa to dla mnie:

$.each(chart.series, function (key, series) { 
    series.update(
     {type: 'bar'}, 
     false 
    ); 
}