【highcharts】同じ種類のグラフを複数表示したい

【やりたいこと】
PHP＋「highcharts」でグラフ作成に挑戦してます。
同一ページ内に、同じ種類のグラフを複数作成したいです。
※グラフ数は可変

【参考にしたページ】
円グラフ

例えばこの円グラフを3つにしたい場合です。
※数値データ自体はもちろん変えて

【調べた結果】
別種類のグラフを重ねたり、別種類のグラフを複数表示する方法は見つかりました。
ですが、今回やりたいことは「同じ種類の」グラフなので違うようでした。

【質問】
実現するにはどんな方法があるでしょうか？

グラフを作成したい回数だけhighchartsの「グラフ生成メソッド」を呼べば良いと考えましたが
html(view)側からjqueryのメソッドを複数回呼ぶことは可能なのでしょうか？
まずここが分かりません。

あるいは、jqueryのメソッド側を修正すべきでしょうか？

よければアドバイス宜しくお願い致します。

JavaScript
1<script type="text/javascript">
2$(function () {
3	$('#container').highcharts({
4        chart: {
5            type: 'pie',
6        },
7        series: [{
8            data: [
9                ['Firefox',<?php echo $f_count; ?>],
10                ['IE', <?php echo $i_count; ?>],
11                ['Chrome', <?php echo $c_count; ?>],
12                ['Safari', <?php echo $s_count; ?>],
13                ['Opera', <?php echo $o_count; ?>],
14                ['Others', <?php echo $others; ?>]
15            ]
16        }]
17    });
18});
19</script>
20コード

kei344

2016/04/24 05:24

現在書かれている、JavaScriptのコードを追記されれば、回答を受けやすいと思います。

pecchan

2016/04/24 06:20

有難う御座います。コードを追記致しました。

行動規範の内容に同意します

回答2件

ベストアンサー

こんな感じで動きませんか？

HTML
1<script type="text/javascript">
2$(function () {
3	$('#container1').highcharts({
4		chart: {
5			type: 'pie',
6		},
7		series: [{
8			data: [
9				['Firefox',<?php echo $c1_f_count; ?>],
10				['IE', <?php echo $c1_i_count; ?>],
11				['Chrome', <?php echo $c1_c_count; ?>],
12				['Safari', <?php echo $c1_s_count; ?>],
13				['Opera', <?php echo $c1_o_count; ?>],
14				['Others', <?php echo $c1_others; ?>]
15			]
16		}]
17	});
18	$('#container2').highcharts({
19		chart: {
20			type: 'pie',
21		},
22		series: [{
23			data: [
24				['Firefox',<?php echo $c2_f_count; ?>],
25				['IE', <?php echo $c2_i_count; ?>],
26				['Chrome', <?php echo $c2_c_count; ?>],
27				['Safari', <?php echo $c2_s_count; ?>],
28				['Opera', <?php echo $c2_o_count; ?>],
29				['Others', <?php echo $c2_others; ?>]
30			]
31		}]
32	});
33});
34</script>
35<div id="container1"></div>
36<div id="container2"></div>

投稿2016/04/24 06:26

kei344

総合スコア69583

pecchan

2016/04/24 06:39

kei344様すいません。冗長になるのは避けたいためご相談させていただきました。同じ処理なので処理は「１つ」だけで実現したいです。記載の通り、作成するグラフの数は可変（１～ｎ個）です。 ※いくつ作成するかは画面からの指定次第。なので、こちらの方法ですとグラフの数だけ処理は増えるので対応出来ないです。