jQuery图表（jqPlot,Highcharts）

最新推荐文章于 2024-08-31 16:17:23 发布

原创最新推荐文章于 2024-08-31 16:17:23 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ViewUI

JavaScript 同时被 2 个专栏收录

39 篇文章

订阅专栏

Jquery

22 篇文章

订阅专栏

本文介绍了两款流行的jQuery图表插件：jqPlot和Highcharts。jqPlot是一款开源的jQuery绘图插件，支持线状图和柱状图等多种图表类型，并提供了丰富的定制选项。Highcharts虽非开源，但支持多种图表类型且兼容所有现代浏览器，包括移动设备。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery图表在[url]http://www.oschina.net/project/tag/275/jquery-chart[/url]共有14款 jQuery图表开源软件
[b]一 jqPlot[/b]
jqPlot官网：[url]http://www.jqplot.com/[/url]
jqPlot是一个jQuery绘图插件，可以利用它制作漂亮的线状图和柱状图。jqPlot支持为图表设置各种不同的样式。提供Tooltips，数据点高亮显示等功能.
[b]二 Highcharts[/b]
highcharts官网：[url]http://www.highcharts.com/[/url]
[color=red]授权协议：对个人用户完全免费，非开源（商用收费）[/color]
支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图,
兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等.
三 jqPlot示例
参考资料
jquery jqPlot API 中文使用教程
[url]http://www.cnblogs.com/mofish/archive/2011/08/15/2139728.html[/url]
jqPlot 图表中文API使用文档及源码和在线示例
[url]http://www.jb51.net/article/29652.htm[/url]
[url]http://www.jb51.net/article/19365.htm[/url]
1 引用css,js文件


<!--[if IE]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]--> 
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" /> 
<script language="javascript" type="text/javascript" src="js/jquery.min.js"></script> 
<script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script> 
<script language="javascript" type="text/javascript" src="js/jqplot.pieRenderer.min.js"></script>

2 增加一个图表展示区域的容器


<div id="chart" style="margin-top:20px; margin-left:20px; width:460px; height:500px;"></div>

3 获取数据并执行加载


$(document).ready(function(){ 
		  jQuery.jqplot.config.enablePlugins = true;
		  var data = [['Verwerkende industrie', 9],['Retail', 8], ['Primaire producent', 7],['Out of home', 6],['Groothandel', 5], 
					  ['Grondstof', 4], ['Consument', 3], ['Bewerkende industrie', 2]];
plot7 = jQuery.jqplot('chart',[data],
			{
			  title: ' ',
			  seriesDefaults: {shadow: true, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { showDataLabels: true } },
			  legend: { show:true }
			}
		  );		 

});

以下上传了下载的资料，方便大家学习！
除了jqPlot,Highcharts外，是一些其它的图表插件资料！