highcharts jquery dynamische Änderung Diagrammtyp Spalte in bar

Question

Ich versuche, Diagrammtyp mit jquery zu wechseln.

fand ich die Art und Weise dinamically den Diagrammtyp zu ändern (ohne ein neues Diagramm Neuerstellung), indem die Funktion verwendet:

Reihe [i] .Update ({type: charttype});

Meine erste Frage wird sein: Es gibt eine Möglichkeit, das gesamte Diagramm und nicht nur die Serie zu ändern? Wenn nicht weiterlesen :)

Aber mit dieser Funktion kann ich nicht das "Bar" Diagramm arbeiten. Es verhält sich wie ein Säulendiagramm. Wie Sie sehen können, funktioniert das Pie-Beispiel als Ausnahme.

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

Wie es funktioniert (Probe Beispiel):

<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 Schöpfung:

$('#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' 
      } 
     } 
    }] 
}); 

Hier ist eine Geige Beispiel: http://jsfiddle.net/supergg/zqvNq/4/

Danke,

Answer 1

Sie können invertierte Parameter im Diagramm verwenden und yAxis aktualisieren. 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

nicht sicher, dass Sie eine Antwort noch oder nicht finden, aber ich fand einen Link, der auch für die Zukunft zu Ihnen 101% nützlich ist. Also kannst du bitte einen Blick darauf werfen. Ich suchte nach etwas anderem und ich fand diesen Link und bekam auch Ihre Frage.

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

Lassen Sie mich wissen oder akzeptieren Sie meine Antwort, wenn dies Ihnen in irgendeiner Weise helfen wird. Cheers :)

Answer 3

Dies funktioniert für mich:

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