• 解決済 sasakure_san

    (@sasakure_san)


    https://ja.wordpress.org/support/topic/%E8%A8%98%E4%BA%8B%E6%AF%8E%E3%81%AB%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E3%81%97%E3%81%9F%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%AE%E7%94%B7%E5%A5%B3%E6%AF%94%E3%82%92%E9%9B%86%E8%A8%88%E3%81%97/

    上記トピックを開始したものです。
    皆様のおかげで無事解決することができました。

    <?php
    $sex_count_men = get_comments (
    	array (
    		'post_id' => $post->ID,
    		'meta_key' => 'sex',
    		'meta_value' => 'men',
    		'count' => true
    	));
    $sex_count_women = get_comments (
    	array (
    		'post_id' => $post->ID,
    		'meta_key' => 'sex',
    		'meta_value' => 'women',
    		'count' => true
    	));
    $sex_count_other = get_comments (
    	array (
    		'post_id' => $post->ID,
    		'meta_key' => 'sex',
    		'meta_value' => 'other',
    		'count' => true
    	));
    $sex_count_noselect = get_comments (
    	array (
    		'post_id' => $post->ID,
    		'meta_key' => 'sex',
    		'meta_value' => '選択してください',
    		'count' => true
    	));
    $sex_count_private = $sex_count_other+$sex_count_noselect;
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    	<script type="text/javascript">
    	google.load("visualization", "1", {packages:["corechart"]});
    	google.setOnLoadCallback(drawChartSexPie);
    	function drawChartSexPie() {
    		
    		var data = google.visualization.arrayToDataTable([
    			['男女比', '(%)'],
    			['男性', <?php echo $sex_count_men;?>],
    			['女性', <?php echo $sex_count_women;?>],
    			['非公開', <?php echo $sex_count_private;?>],
    		]);
    		var options = {
    			'title': '【口コミの男女比】', 
    			is3D: true,
    			legend: { position: 'bottom'},
    		};
    		var chart = new google.visualization.PieChart(document.getElementById('sex_pie'));
    		chart.draw(data, options);
    	}
    </script>
    <div id="sex_pie" style="width: 100%;"></div>

    Google Chartのコードにコメントから取得した数値を動的に組み込み
    問題無くグラフが表示されたのですが、コメントが無いページに関しては
    グラフのタイトルのみ表示され、グラフは表示されず隙間ができてしまいます。

    そこでご相談ですが、コメントが0件の場合、グラフの領域自体を非表示に
    する方法はございますでしょうか。

    質問ばかりで申し訳ございません。
    何卒よろしくお願い申し上げます。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • Colorful-life.

    (@colorfullifeinfo)

    こんにちは。
    javascriptと表示領域の部分を、コメント数を条件にして囲ってしまえば良いのでは無いでしょうか?

    if ( $sex_count_men || $sex_count_women || $sex_count_private ) {
    	// jsと表示領域
    }
    トピック投稿者 sasakure_san

    (@sasakure_san)

    Colorful-life様
    早速のご返信誠にありがとうございます。

    確認ですが、以下のコードの部分を囲うということでよろしかったでしょうか?

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    	<script type="text/javascript">
    	google.load("visualization", "1", {packages:["corechart"]});
    	google.setOnLoadCallback(drawChartSexPie);
    	function drawChartSexPie() {
    		
    		var data = google.visualization.arrayToDataTable([
    			['男女比', '(%)'],
    			['男性', <?php echo $sex_count_men;?>],
    			['女性', <?php echo $sex_count_women;?>],
    			['非公開', <?php echo $sex_count_private;?>],
    		]);
    		var options = {
    			'title': '【口コミの男女比】', 
    			is3D: true,
    			legend: { position: 'bottom'},
    		};
    		var chart = new google.visualization.PieChart(document.getElementById('sex_pie'));
    		chart.draw(data, options);
    	}
    </script>
    <div id="sex_pie" style="width: 100%;"></div>

    お手を煩わせて申し訳ございません。
    ご確認のほどよろしくお願い申し上げます。

    トピック投稿者 sasakure_san

    (@sasakure_san)

    Colorful-life様

    いただきました内容を元に、下記のように記述したところ
    希望通りの表示ができました!

    <?php
    $sex_count_men = get_comments (
    	array (
    		'post_id' => $post->ID,
    		'meta_key' => 'sex',
    		'meta_value' => 'men',
    		'count' => true
    	));
    $sex_count_women = get_comments (
    	array (
    		'post_id' => $post->ID,
    		'meta_key' => 'sex',
    		'meta_value' => 'women',
    		'count' => true
    	));
    $sex_count_other = get_comments (
    	array (
    		'post_id' => $post->ID,
    		'meta_key' => 'sex',
    		'meta_value' => 'other',
    		'count' => true
    	));
    $sex_count_noselect = get_comments (
    	array (
    		'post_id' => $post->ID,
    		'meta_key' => 'sex',
    		'meta_value' => '選択してください',
    		'count' => true
    	));
    $sex_count_private = $sex_count_other+$sex_count_noselect;
    	if ( $sex_count_men || $sex_count_women || $sex_count_private ) {
    		echo'<div id="sex_pie" style="width: 100%;"></div>';
    	}
    ?>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    	<script type="text/javascript">
    	google.load("visualization", "1", {packages:["corechart"]});
    	google.setOnLoadCallback(drawChartSexPie);
    	function drawChartSexPie() {
    		
    		var data = google.visualization.arrayToDataTable([
    			['男女比', '(%)'],
    			['男性', <?php echo $sex_count_men;?>],
    			['女性', <?php echo $sex_count_women;?>],
    			['非公開', <?php echo $sex_count_private;?>],
    		]);
    		var options = {
    			'title': '【口コミの男女比】', 
    			is3D: true,
    			legend: { position: 'bottom'},
    		};
    		var chart = new google.visualization.PieChart(document.getElementById('sex_pie'));
    		chart.draw(data, options);
    	}
    </script>

    この度はご指導いただき本当にありがとうございました。
    自分の知識の奈さにほとほとあきれています……。
    もっと勉強しなければいけないと切に感じました。

    この度は本当にありがとうございます。
    重ねて御礼申し上げます。

    Colorful-life.

    (@colorfullifeinfo)

    こんにちは。

    解決済みなので蛇足になってしまいますが、
    最後にご提示されたコードですと、実際は何もしないjavascriptをロードしているので、そちらもif文の中に入れた方が良いように思います。

    if ( $sex_count_men || $sex_count_women || $sex_count_private ) {
    ?>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script><!--この部分のグラフ以外にもapiを使うなら、この行はif文の外に。-->
    <script type="text/javascript">
    // 省略
    </script>
    <div id="sex_pie" style="width: 100%;"></div>
    <?php
    }
    トピック投稿者 sasakure_san

    (@sasakure_san)

    Colorful-life様

    最後までご丁寧にありがとうございます!
    システムの仕事をしていると、基本的に人との付き合いが
    殆ど無いので、Colorful-life様の優しさが沁みます…。

    自分も教える側になれるよう頑張りたいと思います!
    本当にありがとうございました!!!!!!

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「GoogleChartのカスタマイズ」には新たに返信することはできません。