Yii 扩展 yiiopenflashchart 的使用

以前用过openflashchart,好强大的一个FLASH开源图表组件。openflashchart第一版是采用json变量定义数据设置集合,而openflashchart2是采用外部json文件定义数据设置集合。因为本人系统使用YII框架,所以肯定是先看看有没有YII的图表扩展,果然,有yiiopenflashchart。然而由于扩展使用EOFC2类封装,所以还要了解它的方法。下面做点基本应用的总结,方便大家以后使用:

扩展调用的方法我这里就不说了,在官网上也有好多范例(地址在最底部),个人感觉在配置文件里import更规范一点。

下面说一下一些常用的配置方法:

1、开始使用

$flashChart = new EOFC2;
$flashChart->begin();

2、设置x轴和y轴的名称:

$flashChart->setLegend('x','名称','css样式')
//例:
$flashChart->setLegend('x','time', '{color:#1835ff;font-size:12px;}');
$flashChart->setLegend('y','count', '{color:#1835ff;font-size:12px;}');

3、设置x轴和y轴的标记范围、步进数和显示名称

$flashChart->axis('x',array('range' => array(0,4,1),'labels'=>array('lab0','lab1','lab2','lab3','lab4')));
//红色部分是作为options,可设置range, label, colour, grid_colour等属性
//'range'=>array(min,max,step) 设置范围和步进
//'label'为标记文字,若不设置,则按range的范围和步进显示相应数字
//例:
$flashChart->axis('x',array('range' => array(0,24,1),'labels'=>array('00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24')));
$flashChart->axis('y',array('range' => array(0,100,1)));

4、定义数据来源

$flashChart->setData($dataArray,'{n}',false,'dataArray');
//$dataArray是数组,可以是一维数组,也可以是多维数组
//{n}是读出数组的序号,如上例,读取的将是$dataArray[0],$dataArray[1],$dataArray[2]...
//若定义多维数组,例如:
$dataArray[0]['value']=22;
$dataArray[1]['value']=27;
$dataArray[2]['value']=25;
//则可以如下来设置参数:
$flashChart->setData($dataArray,'{n}.value',false,'dataArray');
//第三个参数false是labelPaths,表示鼠标放上时显示的文字,但我按照例子测试line无效,bar有效
//可以参照官网的例子进行设置:
 
$data['1']['Day']['date'] = 'Oct \'09';
$data['1']['Day']['count'] = '321';
$data['2']['Day']['date'] = 'Nov \'09';
$data['2']['Day']['count'] = 345;
$data['3']['Day']['date'] = 'Dec \'09';
$data['3']['Day']['count'] = 500;
 
$flashChart->setData($data);
$flashChart->setNumbersPath('{n}.Day.count');
$flashChart->setLabelsPath('default.{n}.Day.date');

5、设置提示

$flashChart->setToolTip('#key#:#val#');
//鼠标放到点上出来的提示,#key#表示data的key(在上例中是'dataArray'),#val#表示值

6、生成图形

$flashChart->renderData('图形',$options,'dataArray');
 
//例:
$flashChart->renderData('line_dot',array('colour'=>'#009900','key'=>array('来访人数','12')),'dataArray');
//line_dot表示带点的线形图
//array中是各种参数,可参考openflashchart的参数表,colour表示线形颜色,key表示线形表示
//dataArray是表示数据集,必须于4中setData的最后参数相对应

7、生成图形

$flashChart->render('100%','300');
//这个应该不用多说了吧

8、我觉得的一个BUG
问题:renderData中的数组类型参数会被转换成一个String,值为"Array"

public function renderData(
    $type = 'bar',
    $options = array(),
    $datasetName = 'default',
    $chartId = null) {
        $options = preg_replace('/\s+/', ' ', $options);
        echo $this->chart($type, $options, $datasetName, $chartId);
    }
)

在EOFC2.php中找到以上一段,把$options一行注释掉即可,暂时未发现使用有其他问题

最后附上此次控索完成的效果图:

效果图

参考:

http://www.yiiframework.com/extension/yiiopenflashchart/

http://teethgrinder.co.uk/open-flash-chart-2/

若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏