简单jQplot创建引擎（支持线图/饼图/柱状图）

最新推荐文章于 2024-08-16 11:39:58 发布

匠柒

最新推荐文章于 2024-08-16 11:39:58 发布

阅读量1.5k

点赞数

分类专栏：前端 jqplot 文章标签： javascript jqplot jquery js

本文链接：https://blog.csdn.net/wtderek/article/details/22885939

版权

本文介绍如何利用JQPlot库，通过简单的代码配置，快速生成包括线图、饼图和柱状图在内的各种图表。在实习项目中，作者实现了从数据源获取数据并动态生成图表的Demo，读者可以通过指定DataText中的变量来定制图表。

摘要由CSDN通过智能技术生成

实习公司项目需要从数据源读取一张表，然后通过指定一个字符串的形式就能生成表格，于是我苦逼的吭哧吭哧鼓捣了挺久，弄了个初级版本demo出来。

用的是JQplot，直接贴代码：

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>

		<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
		<link rel="stylesheet" type="text/css" href="js/jqplot/jquery.jqplot.min.css"/>
		<script type="text/javascript" src="js/jqplot/jquery.jqplot.min.js"></script>
		<script type="text/javascript" src="js/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
		<script type="text/javascript" src="js/jqplot/plugins/jqplot.logAxisRenderer.min.js"></script>
		<script type="text/javascript" src="js/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
		<script type="text/javascript" src="js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
		<script type="text/javascript" src="js/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
		<script type="text/javascript" src="js/jqplot/plugins/jqplot.pointLabels.min.js"></script>
		<script type="text/javascript" src="js/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
		<script type="text/javascript" src="js/jqplot/plugins/jqplot.highlighter.min.js"></script>
		<script type="text/javascript" src="js/jqplot/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
		<script type="text/javascript" src="js/jqplot/plugins/jqplot.barRenderer.min.js"></script>
		<script type="text/javascript" src="index.js"></script>

	</head>
	<script type="application/x-javascript">
		var DataText = {};
		var listData = new Array();
		var pot;
		jQuery(function($) {
			var aa =  {"total":"15","rows":[{"price":31,"name":"li","datee":"2013-05-01","eat":"ps"},{"price":9,"name":"li","datee":"2013-05-02","eat":"st"},{"price":31,"name":"li","datee":"2013-05-03","eat":"ps"},{"price":31,"name":"li","datee":"2013-05-04","eat":"ps"},{"price":9,"name":"li","datee":"2013-05-05","eat":"st"},{"price":16,"name":"wang","datee":"2013-05-01","eat":"hb"},{"price":9,"name":"wang","datee":"2013-05-02","eat":"st"},{"price":31,"name":"wang","datee":"2013-05-03","eat":"ps"},{"price":16,"name":"wang","datee":"2013-05-04","eat":"hb"},{"price":9,"name":"wang","datee":"2013-05-05","eat":"st"},{"price":9,"name":"zhang","datee":"2013-05-01","eat":"st"},{"price":9,"name":"zhang","datee":"2013-05-02","eat":"st"},{"price":9,"name":"zhang","datee":"2013-05-03","eat":"st"},{"price":16,"name":"zhang","datee":"2013-05-04","eat":"hb"},{"price":16,"name":"zhang","datee":"2013-05-05","eat":"hb"}]};
			for (var i in aa.rows) {
				listData.push([aa.rows[i].name, aa.rows[i].datee, aa.rows[i].eat, aa.rows[i].price]);
			}
			/*listData
			 //    0         1         2    3
			 //[["li", "2013-05-01", "ps", 31],
			 //["li", "2013-05-02", "st", 9],
			 //["li", "2013-05-03", "ps", 31],
			 //["li", "2013-05-04", "ps", 31],
			 //["