highcharts jQuery cambio dinamico tipo di grafico colonna a barra

Question

Sto provando a cambiare tipo di grafico usando jquery.

ho trovato il modo di variare dinamicamente il tipo di grafico (senza ricreare un nuovo schema) utilizzando la funzione:

serie [i] .Update ({Tipo: chartType});

La mia prima domanda sarà: c'è un modo per cambiare tutto il grafico e non solo le serie? Se non continua a leggere :)

Ma con questa funzione non sono in grado di far funzionare la 'barra'. Funziona come un grafico a colonne. Come puoi vedere, l'esempio della torta funziona come escluso.

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

Come funziona (ad esempio del campione):

<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 creazione:

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

Ecco un esempio di violino: http://jsfiddle.net/supergg/zqvNq/4/

Grazie,

Answer 1

È possibile utilizzare il parametro invertito nel grafico e aggiornare 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

Non certo di trovare una risposta ancora o no, ma ho trovato un collegamento che è 101% utile a voi anche per riferimento futuro. Quindi puoi dare un'occhiata per favore. Stavo cercando qualcos'altro e ho trovato questo link e ho anche ricevuto la tua domanda.

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

Fammi sapere o accettare la mia risposta se questo ti sarà di aiuto in qualsiasi modo. Saluti :)

Answer 3

Questo funziona per me:

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