highcharts jquery動態更改圖表類型列到酒吧

Question

我試圖切換使用jquery圖類型。

我發現dinamically更改圖表類型（不需要重新創建一個新的表）通過使用函數的方式：

系列[I] .update（{類型：圖圖表}）;

我的第一個問題是：有一種方法可以更改全部圖表，而不僅僅是系列？如果不能繼續閱讀:)

但是使用這個函數我不能使'bar'圖表工作。它的行爲像柱形圖。正如你所看到的餡餅示例正在例外。

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

它是如何工作（例如樣本）：

<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創建：

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

這裏是小提琴例如：http://jsfiddle.net/supergg/zqvNq/4/

謝謝，

Answer 1

您可以在圖表中使用反轉參數並更新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

不知道你找到答案了或沒有，但我發現一個鏈接，是101％對你有用，甚至以供將來參考。所以請你看看。我正在尋找其他東西，我發現這個鏈接，也得到了你的問題。

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

讓我知道或接受我的答案，如果這會幫助你以任何方式。乾杯:)

Answer 3

這個工作對我來說：

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