2011-09-09

CODE - php 使用 Open Flash Chart 畫圖

要利用 php 畫出圖表, 孤了一下有以下幾個套件可用
1. JpGraph : http://jpgraph.net/
2. XML/SWF Charts : http://www.maani.us/xml_charts/
3. Open Flash Chart : http://teethgrinder.co.uk/open-flash-chart/index.php

稍微研究一下後, 決定使用 Open Flash Chart. 以下是使用的紀錄

安裝使用 - http://teethgrinder.co.uk/open-flash-chart-2/tutorial.php

畫一個 log 下班時間的圖表, sample code 如下
html


php
include './php-ofc-library/open-flash-chart.php';

// 下班時間 1
$data_1 = array(
    0 => new scatter_value(mktime(0, 0, 0, 1, 1, date('Y')), '19.5'),
    1 => new scatter_value(mktime(0, 0, 0, 1, 2, date('Y')), '18.2'),
    2 => new scatter_value(mktime(0, 0, 0, 1, 3, date('Y')), '19.5'),
    3 => new scatter_value(mktime(0, 0, 0, 1, 4, date('Y')), '20.5'),
    4 => new scatter_value(mktime(0, 0, 0, 1, 5, date('Y')), '19.5'),
    5 => new scatter_value(mktime(0, 0, 0, 1, 6, date('Y')), '19.5'),
    6 => new scatter_value(mktime(0, 0, 0, 1, 7, date('Y')), '19.5'),
    7 => new scatter_value(mktime(0, 0, 0, 1, 8, date('Y')), '21.2'),
    8 => new scatter_value(mktime(0, 0, 0, 1, 9, date('Y')), '19.5'),
    9 => new scatter_value(mktime(0, 0, 0, 1, 10, date('Y')), '17.9')
);
// 下班時間 2
$data_2 = array(
    0 => new scatter_value(mktime(0, 0, 0, 1, 1, date('Y')), '18.5'),
    1 => new scatter_value(mktime(0, 0, 0, 1, 2, date('Y')), '17.2'),
    2 => new scatter_value(mktime(0, 0, 0, 1, 3, date('Y')), '17.5'),
    3 => new scatter_value(mktime(0, 0, 0, 1, 4, date('Y')), '18.5'),
    4 => new scatter_value(mktime(0, 0, 0, 1, 5, date('Y')), '17.5'),
    5 => new scatter_value(mktime(0, 0, 0, 1, 6, date('Y')), '17.5'),
    6 => new scatter_value(mktime(0, 0, 0, 1, 7, date('Y')), '17.5'),
    7 => new scatter_value(mktime(0, 0, 0, 1, 8, date('Y')), '20.2'),
    8 => new scatter_value(mktime(0, 0, 0, 1, 9, date('Y')), '18.5'),
    9 => new scatter_value(mktime(0, 0, 0, 1, 10, date('Y')), '16.9')
);

$d = new solid_dot();
$d->size(4)->halo_size(1)->tooltip('#date:Y-m-d#
時間: #val#');

$line = new line();
$line->set_default_dot_style($d);
$line->set_values( $data_1 );
$line->set_width( 2 );
$line->set_colour( '#FF0000' );

$line2 = new line();
$line2->set_default_dot_style($d);
$line2->set_values( $data_2 );
$line2->set_width( 2 );
$line2->set_colour( '#FF9500' );

// create an X Axis object
$x = new x_axis();
$x->set_grid_colour( '#86BF83' );
// grid line and tick every 10
// $x->set_range(
    // mktime(0, 0, 0, 1, 1, date('Y')),    // <-- min == 1st Jan, this year
    // mktime(0, 0, 0, 1, 31, date('Y'))    // <-- max == 31st Jan, this year
// );
// show ticks and grid lines for every day:
$x->set_steps(86400);
$labels = new x_axis_labels();
// tell the labels to render the number as a date:
$labels->text('#date:Y-m-d#');
// generate labels for every day
$labels->set_steps(86400);
// only display every other label (every other day)
$labels->visible_steps(1);
$labels->rotate(90);
// finally attach the label definition to the x axis
$x->set_labels($labels);

// create an Y Axis object
$y = new y_axis();
$y->set_grid_colour( '#86BF83' );
$y->set_range( 0, 24, 2 ); 

$chart = new open_flash_chart();
$title = new title('下班時間');
$chart->set_bg_colour( '#D8E3D8' );
$chart->set_title( $title );
$chart->add_element( $line );
$chart->add_element( $line2 );
$chart->set_x_axis( $x );
$chart->set_y_axis( $y );

echo $chart->toPrettyString();
執行結果


此外, 也可以畫其他不同的圖表







沒有留言:

張貼留言