highcharts jquery dynamique de modifier le type de graphique colonne de barre

Je suis en train de commutateur de type de graphique à l'aide de jquery.

J'ai trouvé le moyen de changer dinamically le type de graphique (sans recréer un nouveau tableau) à l'aide de la fonction :

série[i].mise à jour({ type: chartType});

Ma première question sera : Il y a un moyen de changer le tableau et pas seulement de la série ? Si pas continuer à lire 🙂

Mais avec cette fonction, je ne suis pas en mesure de faire le " bar " tableau de travail. Il agit comme un graphique en colonnes. Comme vous pouvez le voir la tarte exemple fonctionne correctement.

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

Comment il fonctionne(exemple d'échantillon) :

<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 création :

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

Ici est un violon exemple : http://jsfiddle.net/supergg/zqvNq/4/

Merci,

OriginalL'auteur Jérôme | 2013-08-30