2013-08-30 14 views
7

jqueryを使用してグラフの種類を切り替えようとしています。highcharts jquery動的変更グラフの種類の列を棒に

Iは、関数を使用して(新しいグラフを再作成することなく)dinamicallyグラフの種類を変更する方法を発見した:

シリーズ[I] .update({タイプ:ChartTypeを})。

私の最初の質問です:シリーズだけでなく、すべてのチャートを変更する方法がありますか?読んでいない場合:)

しかし、私は 'バー'チャートを動作させることができません。それは縦棒グラフのように動作します。あなたが見ることができるように、パイの例は例外として動作しています。

バー:どのように動作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/

ありがとう、

答えて

10

チャートの反転パラメータを使用して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' 
    }); 

}); 
+0

は、[OK]を私はそれが働いていることがわかります。しかし、実際には棒グラフではありません。 –

+0

それは完全ではない場合は、破壊することができますし、新しいグラフを作成します。 –

+0

私は、チャートのレベルをチャートのレベルで切り替える方法がないと信じることはできません。あなたのタイマーのためのThksセバスチャン –

-1

わからないあなたはまだかどうか答えを見つけることが、私も今後の参考のためにあなたに101%に有用である一つのリンクを発見しました。だからあなたは見てみてください。私は何か他のものを探していました。私はこのリンクを見つけました。あなたの質問もありました。

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

これが何らかの形であなたに役立つ場合は、私の回答を知ってもらえますか?乾杯:)

3

これは私の作品:

$.each(chart.series, function (key, series) { 
    series.update(
     {type: 'bar'}, 
     false 
    ); 
} 
関連する問題