jquery flot_使用jQuery Flot和Google Analytics（分析）动态创建图表

待我称王封你为后i 2023-02-22 01:27 2阅读 0赞

jquery flot

![jQuery Flot][]

Earlier in the week I published a popular article titled [Dynamically Create Charts Using MooTools MilkChart and Google Analytics][]. My post showed you how to use MooTools MilkChart and a splash of PHP to create beautiful charts of Google Analytics data. I was interested in seeing what jQuery had to offer in the charting department. [jQuery Flot][jQuery Flot 1] is what I found.

在本周早些时候，我发表了一篇颇受欢迎的文章，标题是[使用MooTools MilkChart和Google Analytics(分析)动态创建图表][Dynamically Create Charts Using MooTools MilkChart and Google Analytics] 。 我的文章向您展示了如何使用MooTools MilkChart和大量PHP创建Google Analytics(分析)数据的漂亮图表。 我很想知道jQuery必须在制图部门提供什么。 我发现了[jQuery Flot][jQuery Flot 1] 。

[View Demo][] [观看演示][View Demo]

## PHP **(**The 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;

The above code is the same as my MooTools post with the exception of the statistics output format. jQuery flot prefers arrays instead of a HTML table.

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

## jQuery Flot JavaScript **(**The 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' }
    	});
    });

The above is a simple example of using jQuery Flot's plot method. Simply provide the placeholder and statistical data from the PHP above.

上面是使用jQuery Flot的plot方法的简单示例。 只需从上面PHP提供占位符和统计数据即可。

[View Demo][] [观看演示][View Demo]

## 比较方式 **(**Comparison**)** ##

*  jQuery Flot provides IE support via ExCanvas, which is great.
    
    jQuery Flot通过ExCanvas提供IE支持，这很棒。
 *  MilkChart allows for pie charts while Flot doesn't. I prefer pie charts to other chart types.
    
    MilkChart允许使用饼图，而Flot则不允许。 我更喜欢饼图而不是其他图表类型。
 *  MilkChart allows for easy creation of charts from HTML tables (good for accessibility) while jQuery Flot requires an array syntax.
    
    MilkChart允许从HTML表轻松创建图表(便于访问)，而jQuery Flot需要数组语法。

What do you think? Which method do you prefer?

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

> 翻译自: [https://davidwalsh.name/jquery-flot][https_davidwalsh.name_jquery-flot]

jquery flot

[jQuery Flot]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9mbG90LnBuZw?x-oss-process=image/format,png
[Dynamically Create Charts Using MooTools MilkChart and Google Analytics]: https://davidwalsh.name/milkchart
[jQuery Flot 1]: http://code.google.com/p/flot/
[View Demo]: https://davidwalsh.name/demo/flot.php?month=9&year=2009
[https_davidwalsh.name_jquery-flot]: https://davidwalsh.name/jquery-flot