jpgraph - php graph to image

   jpgraph - php graph to image

클라이언트에서 운영되는 차트에는 HTML5 와 SVG를 적극적으로 이용하여 화려한 기능과 미려한 디자인을 겸비한 

좋은^[각주:1] 차트들이^[각주:2] 많지만^[각주:3]

이 차트들은 모두 클라이언트의 웹 브라우저에서 실행되기 때문에 이메일을 통한 보고서 서비스를 지원하기에는 

매우 어렵다는 단점이 있다. 

그 단점이란 서버사이드 언어에 표현된 스크립트를 자바스크립트 쉘^[각주:4] 등을 통하여 직접 인터프리터 해주어야하고

실제 해석이 되어도 브라우저호환 이라는 최종보스가 등장하기 때문이다. 더군다나 SVG로 그린 이미지는 

캔버스로 캡쳐해도 안잡힌다.^[각주:5]

어쨌든 이러한 복잡한 방법과 번거로운 절차를 없애기 위해서 이메일 보고서에 다음과 같은 방법으로 작업하기로 결정.

1. 먼저 이메일용 HTML을 마크업하고 Style을 마크업된 페이지에 직접 작성한뒤 

   인라인 스타일로 변경해주는 툴^[각주:6]을 사용하여 스타일을 변경하고. ( 그렇지 않으면 그 엄청난 노가다를 직접해야 한다 )

2. 차트는 jpgraph^[각주:7]를 사용하여 메일링 보고서 서비스에 사용하기로 결정하였다. 

   jpgraph

1. 버전 : 2017. 04. 18 현재 버전은 JpGraph-4.0.2 (4.0.2) 이며 Free-release 이다.

2. 사용법

 A. 아주 간단하게 사용하기

     a-1.  jpgraph.php 파일에 그래프를 만든다.

     a-2. <img src='jpgraph.php' /> ... 끝이다.

   

     Tip. 당연하겠지만

     a-3. <img src='jpgraph.php?COMPANY_ID=1' /> ...처럼 GET 으로 변수를 넘겨줄수도 있다.

B . 파일로 사용하기

    그래프 스트로크 부분을 주석처리 ( //$graph->Stroke(); )하고 다음과 같이 사용한다.

    //$graph->Stroke();

    $fileName = "/tmp/imagefile.png";

    $graph->img->Stream($fileName);

C. base-64 로 이미지 인코딩하기. 만약 이미지를 상대경로, 절대경로가 아니라 직접 인코딩된 문자열로 사용하려면 적용한다.

// img to base64 encode

$path = 'imagefile.png';

$type = pathinfo($path, PATHINFO_EXTENSION); // png

$data = file_get_contents($path);

$base64 = 'data:image/'.$type.';base64,'.base64_encode($data);

// html 에서는

<img src='{$base64}' /> ... 로 사용

3. 결과 보기

   위와 같이 이미지로 출력된다. 자세히 보면 한글이 모두 □□□□□ 으로 깨져있다.

   한글깨짐 처리하기

1. 나눔고딕 ttf 파일 ( NanumGothic.ttf을 다운받아 jpgraph-4.0.2/src/fonts 폴더에 붙여넣는다.

   현재 2017. 04. 18에 버전 JpGraph-4.0.2 (4.0.2) 에서 src > fonts 폴더가 존재하므로 여기에 넣어놓았다.

   * 보통 C 드라이브에 Window > Font 폴더에 폰트가 있으므로 본인이 사용하려는 한글폰트(저작권 주의)를 사용하면 된다.

  

2. 이제 폰트 리스트 클래스에서 폰트를 선언하고 속성을 추가해준다.

src/jpgraph_ttf.inc.php  파일을 찾고 open

//nanum font

// 본인의 경우 jpgraph-4.0.2/src/fonts/  에 폰트가 있고 jpgraph.php 입장에서는 바로 fonts/ 가 경로가 된다.

define("TTF_DIR","fonts/");    

define("FF_NANUMGOTHIC", 13);

  

그다음 할일은 클래스에 등록(속성을 추가)한다.

FF_NANUMGOTHIC => array(

            FS_NORMAL =>'NanumGothic.ttf',

            FS_BOLD =>'NanumGothic.ttf',

            FS_ITALIC =>'NanumGothic.ttf',

            FS_BOLDITALIC =>'NanumGothic.ttf' ),

         );

3. 이제 준비가 다 되었으니 실제 그래프를 사용하는 php 파일에서 사용해보도록 하자.

//title

$graph->title->SetFont(FF_NANUMGOTHIC,FS_BOLD,12);

$graph->title->Set('타이틀');

//legend

$graph->legend->SetFont(FF_NANUMGOTHIC,FS_BOLD,8);

$graph->legend->SetFrameWeight(1);

4. 결과

한글이 잘 출력되는 모습을 확인할 수 있다.

결과코드)

<?php // content="text/plain; charset=utf-8"

require_once ('jpgraph/jpgraph.php');

require_once ('jpgraph/jpgraph_line.php');

$datay1 = array(20,15,23,15);

$datay2 = array(12,9,42,8);

$datay3 = array(5,17,32,24);

// Setup the graph

$graph = new Graph(890,250);

$graph->SetScale("textlin");

$theme_class=new UniversalTheme;

$graph->SetTheme($theme_class);

$graph->img->SetAntiAliasing(false);

$graph->title->SetFont(FF_NANUMGOTHIC,FS_BOLD,12);

$graph->title->Set('타이틀');

$graph->SetBox(false);

$graph->img->SetAntiAliasing();

$graph->yaxis->HideZeroLabel();

$graph->yaxis->HideLine(false);

$graph->yaxis->HideTicks(false,false);

$graph->xgrid->Show();

$graph->xgrid->SetLineStyle("solid");

$graph->xaxis->SetTickLabels(array('A','B','C','D'));

$graph->xgrid->SetColor('#E3E3E3');

// Create the first line

$p1 = new LinePlot($datay1);

$graph->Add($p1);

$p1->SetColor("#6495ED");

$p1->SetLegend('사용량');

// Create the second line

$p2 = new LinePlot($datay2);

$graph->Add($p2);

$p2->SetColor("#B22222");

$p2->SetLegend('피크전력(최대수요)');

// Create the third line

$p3 = new LinePlot($datay3);

$graph->Add($p3);

$p3->SetColor("#FF1493");

$p3->SetLegend('작년동월사용량');

$graph->legend->SetFont(FF_NANUMGOTHIC,FS_BOLD,8);

$graph->legend->SetFrameWeight(1);

// Output line

$graph->Stroke();

?>

  

1. https://www.amcharts.com/ [본문으로]
2. http://www.highcharts.com/ [본문으로]
3. http://www.fusioncharts.com/php-charts/ 비싸다..아주 비싸다 [본문으로]
4. https://developer.mozilla.org/ko/docs/Web/JavaScript/%EC%89%98 [본문으로]
5. https://html2canvas.hertzen.com/ [본문으로]
6. https://www.myintervals.com/emogrifier.php [본문으로]
7. http://jpgraph.net/ [본문으로]