使用 jQuery Flot 和 Google Analytics 动态创建图表

本周早些时候，我发表了一篇名为使用 MooTools MilkChart 和 Google Analytics 动态创建图表的热门文章。我的帖子向您展示了如何使用 MooTools MilkChart 和一些 PHP 来创建漂亮的 Google Analytics 数据图表。我很想知道 jQuery 在制图部门必须提供什么。 jQuery Flot 是我发现的。

PHP

/* defaults */
$month = date('n');
$year = date('Y');

/* submission? */
if($_GET['month'] || $_GET['year']):
	/* cleanse lookups */
	$month = (int) $_GET['month']; if(!$month) { $month = 1; }
	$year = (int) $_GET['year']; if(!$year) { $year = date('Y'); }
	/* retrieve information from google analytics */
	require 'ga/analytics.class.php';
	$analytics = new analytics('youraccount@gmail.com', 'password');
	$analytics->setProfileByName('yourdomain.com');
	$analytics->setMonth($month,$year);
	$visits = $analytics->getVisitors();
	$views = $analytics->getPageviews();
	/* build tables */
	if(count($visits)) {
		foreach($visits as $day=>$visit) { 
			$flot_datas_visits[] = '['.$day.','.$visit.']';
			$flot_datas_views[] = '['.$day.','.$views[$day].']';
		}
		$flot_data_visits = '['.implode(',',$flot_datas_visits).']';
		$flot_data_views = '['.implode(',',$flot_datas_views).']';
	}
endif;

除了统计输出格式外，上面的代码与我的 MooTools 帖子相同。 jQuery flot 更喜欢数组而不是 HTML 表格。

jQuery Flot JavaScript

$(document).ready(function() {
	var visits = <?php echo $flot_data_visits; ?>;
	var views = <?php echo $flot_data_views; ?>;
	$('#placeholder').css({
		height: '400px',
		width: '600px'
	});
	$.plot($('#placeholder'),[
			{ label: 'Visits', data: visits },
			{ label: 'Pageviews', data: views }
		],{
	        lines: { show: true },
	        points: { show: true },
	        grid: { backgroundColor: '#fffaff' }
	});
});

以上是一个使用jQuery Flot的plot方法的简单例子。只需提供来自上述 PHP 的占位符和统计数据。

比较

• jQuery Flot 通过 ExCanvas 提供 IE 支持，这很棒。
• MilkChart 允许饼图，而 Flot 不支持。与其他图表类型相比，我更喜欢饼图。
• MilkChart 允许从 HTML 表格轻松创建图表（有利于可访问性），而 jQuery Flot 需要数组语法。

你怎么看？您更喜欢哪种方法？