Drupal图表(Chart)模块（选取）

有一篇很好用的文章：http://www.lullabot.com/articles/drupal-charting。详细的介绍了各个Drupal的图表模块，很具有参考价值。

这里面目前推荐了3个模块，Charts，Chart，FusionCharts，如果想使用views创建图表的话，推荐使用Charts，及扩展模块。

Charts：功能最强，支持Google Chart，Open Flash Chart，FusionCharts。它的特性包括：数据模式、3个图表插件、十多个图形类型、drupal管理图表、封装了API、可集成Views、可以自定义。下载地址：http://drupal.org/project/charts。

Chart：又名Google Chart，是用的google chart api，在Drupal层提供了封装。这个模块的特点在于完全的实现了Google chart api提供的所有功能。同时是一个轻量级的解决方案。图表的生成由google完成，不需要占用太多的计算资源。下载地址：http://drupal.org/project/chart。

FusionCharts：这个模块是对FusionCharts进行了封装，它在Drupal中新建了一个节点类型，里面包含了一个新的字段，并同时提供了API，可以使用sql查询和数组来创建图表。下载地址：http://drupal.org/project/fusioncharts。

3个模块的下载对比，

一周起始日期	Charts	Chart	FusionCharts
2009-12-20	1,120	1,395	295
2009-12-13	1,140	1,474	253
2009-12-6	1,110	1,399	265
平均	1,123	1423	271

通过模块的下载量对比，我们发现，Chart模块（google chart）是目前使用最广的，根据模块描述的功能，它能够满足我们的需求。

Chart模块的相关文档，http://code.google.com/p/drupal-chart-api/w/list

本文档由http://www.thinkindrupal.com翻译，由 http://www.sekaiweb.com 赞助

实例：

简单图表

代码实现片断：

  $chart =

      '#chart_id'

      '#title'

      '#type'

    );

    

  $chart[

  $chart[

  $chart[



  echo chart_render($chart);'#data']['dairy'] =5;'#data']['meats'] =2;'#data']['fruits']=3;=> CHART_TYPE_PIE_3D,=> t('Servings'),=>'test_chart', array(

标签，标题样式化，和图表尺寸

代码实现片断：

   $chart =

      '#chart_id'

      '#title'

      '#type'

      '#size'

    );

    

  $chart[

  $chart[

  $chart[



  $chart[

  $chart[

  $chart[



  echo chart_render($chart);'#labels'][]= t('Dairy');'#labels'][]= t('Meats');'#labels'][]= t('Fruits');'#data']['dairy'] =5;'#data']['meats'] =2;'#data']['fruits']=3;=> chart_size(400,200),=> CHART_TYPE_PIE,=> chart_title(t('Servings'),'cc0000',15),=>'test_chart', array(

自定义数据颜色

替代方式之一，可以使用颜色模式钩子chart_unique_color()。，它可以关联到多个包含部分或全部相同内容的图表。你也可以考虑一下

代码实现片断：

$chart =

      '#chart_id'

      '#title'

      '#type'

      '#size'

    );

    

  $chart[

  $chart[

  $chart[



  $chart[

  $chart[

  $chart[

 

  $chart[

  $chart[

  $chart[



  echo chart_render($chart);'#data_colors'][]='0000ff';'#data_colors'][]='ff0000';'#data_colors'][]='00ff00';'#labels'][]= t('Dairy');'#labels'][]= t('Meats');'#labels'][]= t('Fruits');'#data']['dairy'] =5;'#data']['meats'] =2;'#data']['fruits']=3;=> chart_size(400,200),=> CHART_TYPE_PIE,=> chart_title(t('Servings'),'cc0000',15),=>'test_chart', array(

线状图、图文、分辨率调整、标签位置

你可以在下面的图标中看到，所选编码类型的分辨率没有很好的反映所提供的数据。所以在该图表的下面，我们设置了"'#adjust_resolution' => TRUE,"。

代码实现片断：

$chart = array(
'#chart_id'=>'test_chart',
'#title'=> chart_title(t('Servings'),'cc0000',15),
'#type'=> CHART_TYPE_LINE,
'#size'=> chart_size(400,200),
'#adjust_resolution'=> TRUE,
);

$chart['#data']['fruits']= array(1,3,5,4,2);
$chart['#data']['meats'] = array(2,2,4,3,1);
$chart['#data']['dairy'] = array(5,2,3,1,2);

$chart['#legends'][]= t('Fruits');
$chart['#legends'][]= t('Meats');
$chart['#legends'][]= t('Dairy');

$chart['#data_colors'][]='00ff00';
$chart['#data_colors'][]='ff0000';
$chart['#data_colors'][]='0000ff';

$chart['#mixed_axis_labels'][CHART_AXIS_Y_LEFT][0][]= chart_mixed_axis_range_label(0,5);
$chart['#mixed_axis_labels'][CHART_AXIS_Y_LEFT][1][]= chart_mixed_axis_label(t('Count'),95);

$chart['#mixed_axis_labels'][CHART_AXIS_X_BOTTOM][1][]= chart_mixed_axis_label(t('Mon'));
$chart['#mixed_axis_labels'][CHART_AXIS_X_BOTTOM][1][]= chart_mixed_axis_label(t('Tue'));
$chart['#mixed_axis_labels'][CHART_AXIS_X_BOTTOM][1][]= chart_mixed_axis_label(t('Wed'));
$chart['#mixed_axis_labels'][CHART_AXIS_X_BOTTOM][1][]= chart_mixed_axis_label(t('Thu'));
$chart['#mixed_axis_labels'][CHART_AXIS_X_BOTTOM][1][]= chart_mixed_axis_label(t('Fri'));
$chart['#mixed_axis_labels'][CHART_AXIS_X_BOTTOM][2][]= chart_mixed_axis_label(t('Days of the week'),50);

echo chart_render($chart);

网格线和图表填充

代码实现片断：

$chart = array(
'#chart_id'=>'test_chart',
'#title'=> chart_title(t('Servings'),'cc0000',15),
'#type'=> CHART_TYPE_LINE,
'#size'=> chart_size(400,200),
'#chart_fill'=> chart_fill('c','eeeeee'),
'#grid_lines'=> chart_grid_lines(20,20,1,5),
);

for($i =0; $i <80; $i++){
$chart['#data'][]= $i + rand(0, $i);
}

echo chart_render($chart);

条形大小和颜色映射

可以使用#bar_size属性调整条形的空间和大小.可以使用chart_unique_color(id)根据内容id来设置颜色,无论在页面上有多少个图标,对应条形的颜色都是相同的:

$chart = array(
'#chart_id'=>'test_chart',
'#title'=> chart_title(t('Bar Chart'),'0000ee',15),
'#type'=> CHART_TYPE_BAR_V_GROUPED,
'#size'=> chart_size(400,200),
'#grid_lines'=> chart_grid_lines(30,15),
'#bar_size'=> chart_bar_size(15,5),
);

$chart['#data'][]= array(40,50,70);
$chart['#data'][]= array(60,50,30);
$chart['#data'][]= array(40,60,20);

$chart['#data_colors'][]= chart_unique_color('test_a');
$chart['#data_colors'][]= chart_unique_color('test_b');
$chart['#data_colors'][]= chart_unique_color('test_c');

echo chart_render($chart);

创建一个地图

现在可以使用下面的代码创建一个地图了:

代码实现片断：

<?php
$chart = array(
'#chart_id'=>'test_chart',
'#type'=> CHART_TYPE_MAP, //Map Type
'#countries'=> array(MG,KE,TN), //Array of ISO country codes (2 letter codes)
'#georange'=> africa, //Geographic Range of the Map - continent name or 'world'
'#data'=> array(10,50,100), //Value affects intensity of colours which will be in the range defined by #data_colours second and third elements
'#data_colors'=> array('ffffff','edf0d4','13390a')//3 values for the colour (all other countries, start colour and end colour)
);
echo chart_render($chart);
?>

用户点数图

代码实现片断：参看http://snippets.dzone.com/posts/show/5985

Drupal版本:

drupal6