iT邦幫忙

0

SQL與PHP 讓輸出平均分給每個圓餅圖

有以下問題想請問各位前輩
想了好久還是不知道該如何寫

以下是我的程式碼
https://ithelp.ithome.com.tw/upload/images/20190630/20112826ECMTyxH2OU.jpg

想讓輸出出來的數字,平均給每個圓餅圖
圖上顯示都排列在同一個圓餅圖切片
https://ithelp.ithome.com.tw/upload/images/20190630/20112826qiPuzMDU9N.jpg

0
小魚
iT邦大師 1 級 ‧ 2019-07-01 07:52:10

所以你的問題出在哪?
是數字分配上的問題,
還是畫圖的問題?

看更多先前的回應...收起先前的回應...

數字分配上的問題
在我點選圓餅圖上最大淡藍色第一大塊
想呈現的數字是上面的22446578就好
第二大塊黑色的顯示4443000

現在遇到的問題是,
點每一塊餅圖,
都會顯示每個數值,
而不是依序分配下去。

小魚 iT邦大師 1 級 ‧ 2019-07-01 08:57:29 檢舉

要看你是用套件還是自己寫的,
用套件的話就看他有沒有提供相關的方法,
只顯示對應的數字就好,

自己寫的話就要針對每一個圓餅區域,
顯示其對應的數字,
另外0的應該不用列出來.

我是拿套件後再試著將自己寫的php程式穿插進去
這個套件原本顯示的是%數
後來我將{point.percentage:.1f} %更改成上述發問的php程式碼

小魚 iT邦大師 1 級 ‧ 2019-07-01 10:05:54 檢舉

問題應該是出在 tooltip 吧,
如果他的tooltip沒辦法每個分開,
那就沒辦法了,
一定要做的話可以考慮找其他套件試試,
套件這種東西就是,
如果你要特定的功能,
有時候不一定會有...

fillano iT邦超人 1 級 ‧ 2019-07-01 10:37:46 檢舉

算是我雞婆,不過切記:不要直接把$_POST收到的東西直接用在SQL查詢字串,這樣會有SQL Injection漏洞。熱門文章剛好有一篇新的文章:[PHP]消毒變數的利器,filter_var和filter_var_array 你可以參考看看。

因為模組原先顯示%數的設定

{point.percentage:.2f}%

是有分開執行的
想說試試看能否改成數值
也可以分開執行

了解!
熱門文章我會再去詳讀
謝謝您的提醒

2
dragonH
iT邦超人 5 級 ‧ 2019-07-01 09:06:15

我怎麼覺得是畫圖的問題

那個 popout 應該算畫圖的一部分吧

如果可以最好提供你查詢完的資料長怎樣

或者你這圖表是用哪個套件

會比較好給範例

codepen

看更多先前的回應...收起先前的回應...
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<style type="text/css">
${demo.css}
		</style>
		<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
        title: {
            text: 'Browser market shares at a specific website, 2014'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    });
});
		</script>
	</head>
	<body>

<script src="../../js/highcharts.js"></script>
<script src="../../js/highcharts-3d.js"></script>
<script src="../../js/modules/exporting.js"></script>

<div id="container" style="height: 400px"></div>
	</body>
</html>

以上是原套件程式碼
我把我的php輸出串放在pointFormat: '{series.name}的後面

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<style type="text/css">
${demo.css}
		</style>
		<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
        title: {
			text: '<?php echo "這是依照".$_POST['gu_month']."排序的報表"?>'			
        },
        tooltip: {
            pointFormat: '{series.name}: <b><?php $sql="select * from aprpt26 where 1=1 $ser7 ORDER BY ".$_POST['gu_month']."DESC";$select=mysql_query($sql);while($data=mysql_fetch_array($select)){echo $data[$_POST['gu_month']]."/";}?></b>'
											
        },
        plotOptions: {
            pie: {
				
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
					
                    format: '{point.name}<b>{point.percentage:.2f}%</b>'
                }
            }
        },
        series: [{
            type: 'pie',
            name: '廠商',
            data: 
			[
				
				<?php 
					echo $m1;							
				?>
            ]
        }]
    });
});
		</script>
	</head>
	<body>	

<script src="../js/highcharts.js"></script>
<script src="../js/highcharts-3d.js"></script>
<script src="../js/modules/exporting.js"></script>

<div id="container" style="height: 400px"></div>
	</body>
</html>

這是我修改過後的程式碼

dragonH iT邦超人 5 級 ‧ 2019-07-01 10:05:53 檢舉

你的問題應該是在於

tooltip: {
  pointFormat: '{series.name}: <b>
    <?php
      $sql="select * from aprpt26 where 1=1 $ser7 ORDER BY ".$_POST['gu_month']."DESC";
      $select=mysql_query($sql);
      while($data=mysql_fetch_array($select)){
        echo  $data[$_POST['gu_month']]."/";
      }
    ?>
  </b>'								
},

這highchart預期的格式是長這樣

tooltip: {
  pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},

但你的php看起來回傳的會長這樣

tooltip: {
  pointFormat: '{series.name}: <b>212132/21321510/0/3132</b>'
},

所以把這部分整理成他要的格式應該就好了

沒有提供那部份的資料長怎樣

只能這樣舉例了


補充一下

應該是說你的資料不應該放在 tooltip

而是放在 data 那

然後在 tooltip 那邊去抓對應的欄位出來

舉例來說

chrome 這筆資料長這樣

mycustomLabel假設為你撈完資料庫的資料放這

{
    name: 'Chrome',
    y: 12.8,
    sliced: true,
    selected: true,
    mycustomLabel: 'ithelp-ithelp-ithelp-ithelp'
},

在 tooltips 改成這樣

tooltip: {
    pointFormat: '{series.name}: <b>{point.mycustomLabel}</b>'
},

就能在 chrome 那筆資料的 label 看到結果

codepen範例

我放在回答本文了

data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]

但在這個地方,我是去撈資料庫裡的資料
所以寫成

data: [
                <?php if($data[$_POST['gu_month']]<>'0'){$m1.= "['".$data['chart_company']."'".",".$data[$_POST['gu_month']] ."],"echo $m1;?>;}
            ]

也就是說

{
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },

沒辦法修改到

感謝您的回應
有看過這個模組
但是他上面的%數
我是想寫成數值
也就是%數到底是量多大?
像是60%的話
數值可能是88995
這個88995佔整個圓餅圖的60%

dragonH iT邦超人 5 級 ‧ 2019-07-01 13:30:29 檢舉

不懂為什麼不行/images/emoticon/emoticon19.gif

還是你給我你的資料

我寫個範例給你看?

有機敏資料的話

隨便帶數字就好

重點是欄位

像是60%的話
數值可能是88995
這個88995佔整個圓餅圖的60%

那就是照我上面的範例呀/images/emoticon/emoticon06.gif

修改好之後
圓餅圖會不見.../images/emoticon/emoticon70.gif
https://ithelp.ithome.com.tw/upload/images/20190702/201128260LXvgzY4WA.jpg

dragonH iT邦超人 5 級 ‧ 2019-07-01 13:42:00 檢舉

私訊 留言 看你囉

我只是想知道你的資料長怎樣

用來舉例

這樣你會比較好了解

e.g.
companyName => 'test'
count => 600
time => 1321156161

之類的

直接 var_dump 你撈完資料庫的資料就好

0
海綿寶寶
iT邦大神 1 級 ‧ 2019-07-01 11:04:38

2015的答案

選我正解

看更多先前的回應...收起先前的回應...

感謝您的回應
有看過這個模組
但是他上面的%數
我是想寫成數值
也就是%數到底是量多大?
像是60%的話
數值可能是88995
這個88995佔整個圓餅圖的60%

看看JSFiddle是不是你要的
把不要顯示的變數刪掉即可

為免JSFiddle失效
Source code 如下

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

$(function () {
	$('#container').highcharts({
		chart: {
			plotBackgroundColor: null,
			plotBorderWidth: null,
			plotShadow: false,
			type:'pie'
		},
			        
		title: {
			text: 'Browsers'
		},
			        
		subtitle: {
			text:false,
		},
		
		tooltip: {
			pointFormat: '{point.name}/{point.percentage:.1f}%/{point.custom}'
		},
		
		plotOptions: {
			pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
					enabled: true,
					format: '<b>{point.name}</b>: {point.percentage:.1f} % {point.custom}',
					style: {
						color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
					}
				}
			}
		},
    		
		series: [{
			name: "Total",
			colorByPoint: true,
			data: [{
				name: "Firefox",
				y: 10,
        custom:"11111"
			}, {
				name: "Chrome",
				y: 12,
         custom:"22222"
			}, {
				name: "Explorer",
				y: 65,
         custom:"33333"
			}, {
				name: "Opera",
				y: 13,
         custom:"44444"
			}]
		}],
								        
	});
});

/images/emoticon/emoticon35.gif
這圓餅圖我好像有玩過,之前是去D3.js網站找一個來套的,感覺還滿好玩的
海綿寶寶 好久不見啊~!

老鷹(eagle)好久不見
大家都離開了
只剩我攏謀離開
/images/emoticon/emoticon10.gif

海綿寶寶我是生活太充實 比較少上線

/images/emoticon/emoticon01.gif

老鷹(eagle)
照這麼說起來,我就是生活太空虛了
/images/emoticon/emoticon17.gif

我要發表回答

立即登入回答