iT邦幫忙

0

在背景製作折線圖並輸出PDF

  • 分享至 

  • xImage

BOSS丟給我一個問題..
他要我如何在不經過前端顯示折線圖情況下..
取得折線圖的圖片(base64)..

剛開始我誤解意思..
我先在前端製作了一個折線圖..
外加一個按鈕..
這個按鈕點擊後會取得折線圖的base64的code
如此..我就可以在取得code後將值傳至另一隻PHP轉成PDF..
(SQL資料庫撈資料 → 產生折線圖 → 觸發按鈕事件取得折線圖base64 → 輸出於PDF上)

PS1..這邊製作折線圖的方式我採用以下方式
ExtJS 製作折線圖
PS2..這邊我產生PDF的方式是用TCPDF套件完成
TCPDF 如何將base64輸出在PDF上

我交件後..他表示不對..
他想要TCPDF本身就能產生折線圖
而不再經過一道手續先產生折線圖再按個按鈕才能產生PDF
可是就我目前了解..
TCPDF只有畫圓餅圖的功能..

想請問依照BOSS要的流程
(SQL資料庫撈資料 → 產生折線圖於PDF上)
有什麼方法可以做到
或是
用我原本的方法加以修改得出答案

((我原本的方法是有想到將按鈕拿掉
並利用listeners: { painted: function() { //取base64值 } }
這個事件是指當組件畫完圖之後發生
可是我這方法卻不動作
也沒有錯誤出現
這證明要嘛條件沒到..要嘛就是折線圖這個模組不支援..))

小魚 iT邦大師 1 級 ‧ 2017-08-03 08:46:26 檢舉
所以你是要用什麼程式語言來做?
主要是PHP + javascript
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
fillano
iT邦超人 1 級 ‧ 2017-08-03 14:48:41
最佳解答

fillano大大提供的參考
其流程是不是 先產生一個圖形 然後取得圖形SVG 最後傳遞給另一支PHP產生PDF呢?!

如果是的話...
那這樣的流程跟我使用ExtJS的方法一樣了~

我比較在意的點是.."產生圖形 取得圖形編碼" 這樣的步驟如何省略不顯示..
應該說..這樣的步驟不能避免
因為要取得圖形編碼的前提是 一定要先產生一個圖形在畫面上
如此才能取得編碼
而我說的省略..也不是真的要省略此步驟..
而是讓產生圖形的程式完全跑完後(也就是圖形已完成顯示於畫面之後)
即觸發事件 取得圖形編碼後 同時導向網頁傳遞編碼給PHP
如次一來..
就會有一種錯覺是好像跳過了顯示圖形的步驟直接產生PDF一樣了~

重點是..在ExtJS中..該觸發事件是甚麼..
我有找到painted可以用..執行後卻無法動作..= =

fillano iT邦超人 1 級 ‧ 2017-08-03 16:08:31 檢舉

這兩個都是PHP,所以程式可以整合在一起。

對耶...
沒有注意到是PHP~XD
看樣子可行~
謝謝老大~!!

0
混水摸魚
iT邦研究生 2 級 ‧ 2017-08-03 09:10:37

SQL資料庫撈資料 → 產生折線圖於PDF上
你中間沒程式連資料庫 又沒程式呼叫 TCPDF
怎麼可能憑空產生?!

你一開始的流程並沒有錯
你老闆是外行所以會有很多天馬行空的想法
身為一個專業的技術從業人員,你除了寫code還要會打臉
打客戶的臉 打老闆的臉 要打醒他們叫他們不要再作夢了
但怎麼打的漂亮打的精采就是門藝術了

說服他
而不是被他說服

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

贊成打臉 !!
/images/emoticon/emoticon32.gif

你中間沒程式連資料庫 又沒程式呼叫 TCPDF

TCPDF是一支PHP
只要我網址直接帶http://....../tcpdf.php
就可以直接執行產生PDF
因為他是PHP..所以我可以在其中寫連結資料庫的語法
撈值..取值..組合......等等
重點!!TCPDF本身提供的函式只有畫圓餅圖..沒有折線圖..

另外..
我也知道我一開始的流程是對的..
所以才打算用偷吃步的方式來做..
就是流程一樣..但是在畫面呈現上跳過中間的部分
(SQL資料庫撈資料 → [產生折線圖 → 觸發當折線圖畫完後事件取得折線圖base64] → 輸出於PDF上)
只不過..如我問題最後說的..painted方法不會動作..還不知道原因..

混水摸魚 iT邦研究生 2 級 ‧ 2017-08-03 09:41:22 檢舉

我還是不太了解你老闆的需求
依我的理解 老闆最後想看到的是PDF檔
有兩個方向
1.直接在網頁上顯示PDF
2.直接下載PDF檔存在電腦

產生折線圖 這你是用前端產生的
所以流程應該是
TCPDF(連結資料庫 抓資料)->餵給產生折線圖的JS->取得折線圖->再倒回去TCPDF產生最後的PDF檔

你是卡在 取得折線圖 失敗嗎?

我問題中有講到...

剛開始我誤解意思..
我先在前端製作了一個折線圖..
外加一個按鈕..
這個按鈕點擊後會取得折線圖的base64的code
如此..我就可以在取得code後將值傳至另一隻PHP轉成PDF..
(SQL資料庫撈資料 → 產生折線圖 → 觸發按鈕事件取得折線圖base64 → 輸出於PDF上)

PS1..這邊製作折線圖的方式我採用以下方式
ExtJS 製作折線圖
PS2..這邊我產生PDF的方式是用TCPDF套件完成
TCPDF 如何將base64輸出在PDF上

也就是說...製作折線圖..取得折線圖..產生PDF..全都是成功的..
老闆要得...
是如何將製作折線圖放在產生PDF這個步驟中..
如果老闆要的是圓餅圖..
我大可以用TCPDF本身提供的函式製作就好(https://tcpdf.org/examples/example_031/)
但是TCPDF沒有提供..
所以我想按照原方法在前端顯示我產生的折線圖..
但是不真正顯示於畫面
而是在折線圖產生後取得折線圖base64
接著執行網址導向至產生PDF的PHP(其中base64以POST方式傳遞)

如果以這個方法來做就可以達到老闆要求
而我卡的點在於取不到base64
這部分需要去了解ExtJS

PS..不一定要用EXTJS做...可以試著找別的套件完成..

fillano iT邦超人 1 級 ‧ 2017-08-03 10:23:05 檢舉

fillano大大..
圓餅圖有$pdf->PieSector方法可以畫..
如果要畫別種chart圖
就得自創一個function
並且用TCPDF提供的基本繪畫函式(線、圓、方..等)去製作..

這部分...需要時間阿...= =

我要發表回答

立即登入回答