利用jQuery插件Jqplot实现数据可视化图表实例
38 浏览量
更新于2024-08-30
收藏 247KB PDF 举报
jQuery插件Jqplot是一种强大的JavaScript图表库，用于在网页上创建交互式图表。它提供了多种类型的图形，包括线图、柱状图、饼图、散点图等，以及丰富的自定义选项和交互功能。在这个实例中，HTML结构展示了如何在页面中引入必要的CSS和JavaScript文件，以确保Jqplot的正确加载。
首先，文档头部分包含了`<head>`标签，其中设置了字符编码为UTF-8，并链接了Jqplot的核心CSS样式表(`jquery.jqplot.min.css`)。接着，引入了多个JavaScript文件，包括：
1. `jquery.min.js`: jQuery库，是Jqplot的基础，提供了DOM操作和事件处理的基础。
2. `jquery.jqplot.min.js`: Jqplot的主库，负责创建和配置图表。
3. `excanvas.min.js`: 对于不支持HTML5 Canvas的浏览器提供回退方案，确保图表在所有浏览器上的兼容性。
4. 各种插件：`barRenderer.min.js`用于绘制柱状图，`pointLabels.min.js`添加数据点的标签，`canvasAxisTickRenderer.min.js`和`canvasTextRenderer.min.js`处理轴标签和文本渲染，`cursor.min.js`实现鼠标悬停时的交互提示，`highlighter.min.js`用于高亮选中的数据点，`dateAxisRenderer.min.js`处理日期轴，以及`categoryAxisRenderer.min.js`支持分类轴。
在`$(function(){...})`的回调函数中，这部分代码将被在文档加载完成后执行。通常，这会包含初始化Jqplot图表的代码，如数据的准备、图表类型的选择、配置项设置以及可能的事件监听。由于这部分内容被省略了，具体实现可能涉及以下步骤：
- 定义或获取数据集，例如一个二维数组，每个子数组代表一列数据。
- 创建一个新的Jqplot实例，指定图表容器元素，如`$("#chartContainer")`。
- 选择图表类型，比如柱状图（bar），并传递数据集和配置选项，如轴范围、颜色、标题、标签等。
- 配置插件，如启用或禁用特定功能，如点标签、鼠标悬停提示、高亮等。
- 显示图表，调用`$.jqplot('draw')`方法。
整个过程展示了如何利用Jqplot插件在前端构建动态、可定制的图表，适合各种Web应用程序，特别是那些需要实时数据分析和可视化的场景。通过学习这些代码片段，开发者可以逐步构建出符合项目需求的复杂图表。
jQuery插件插件 Jqplot图表实例图表实例
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="js/jqplot/jquery.jqplot.min.css" rel="stylesheet" />
<script src="js/jqplot/jquery.min.js"></script>
<script src="js/jqplot/jquery.jqplot.min.js"></script>
<script src="js/jqplot/excanvas.min.js"></script>
<script src="js/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script src="js/jqplot/plugins/jqplot.pointLabels.min.js"></script>
<script src="js/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script src="js/jqplot/plugins/jqplot.cursor.min.js"></script>
<script src="js/jqplot/plugins/jqplot.highlighter.min.js"></script>
<script src="js/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script src="js/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script src="js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script>
$(function () {
//--------------官网---------------------------
// var plot1 = $.jqplot('chart1', [[3, 7, 9, 1, 4, 6, 8, 2, 5]]);
//----------------实例 -------------------------
// var ticks = ['20110915', '20111024', '20111003', '20111008', '20111020', '20111012', '20110914', '20111029', '20111004',
'20111022', '20111019', '20111017', '20111026', '20111005', '20110912', '20110903', '20110911', '20110923', '20111016',
'20111001', '20110904', '20110924', '20110918', '20111021', '20111011', '20111030', '20110908', '20110913', '20110928',
'20111025', '20110921', '20111002', '20111028', '20110906', '20110926', '20111018', '20110905', '20111007', '20111013',
'20110907', '20110916', '20110927', '20111027', '20110902', '20110922', '20111006', '20111010', '20110910', '20111023',
'20110919', '20110930', '20110917', '20110920', '20111009', '20111015', '20110909', '20110925', '20110929', '20111014',
'22'];
var tick2 = ['20110915', '20111024', '20111003', '20111008', '20111020', '20111012', '20110914', '20111029', '20111004',
'20111022'];
//var b1 = [46.84, 59.87, 103.42, 62.80, 67.72, 32.59, 54.91, 109.06, 79.68, 83.99, 56.27, 59.23, 68.53, 60.45, 78.47, 62.24,
91.62, 39.38, 52.76, 122.34, 95.84, 81.85, 72.62, 69.30, 49.76, 78.07, 36.22, 44.18, 88.87, 72.65, 49.90, 140.91, 75.52,
64.64, 63.31, 73.33, 65.53, 69.31, 56.26, 51.32, 50.53, 81.99, 74.16, 31.04, 41.95, 64.09, 65.85, 73.88, 91.34, 67.09, 93.91,
65.96, 52.86, 41.03, 67.93, 72.25, 74.18, 103.10, 51.57, 55.74]; //子统计1数据
var b2 = [46.84, 59.87, 103.42, 62.80, 67.72, 32.59, 54.91, 109.06, 79.68, 83.99];
var plot2 = $.jqplot('chart2', [b2], {
title: '2011-9到2011-10月现金收益（元）',
legend: { show: true, location: 'ne' }, //提示工具栏--show：是否显示,location: 显示位置 (e:东,w:西,s:南,n:北,nw:西北,ne:东
北,sw:西南,se:东南)
series: [
{
label: '现金收益',
// lineWidth: 8, //线条粗细
markerOptions: { size: 9, style: "circle" } // 节点配置
}
], //提示工具栏
//captureRightClick: true,//禁用右键
seriesDefaults: {
pointLabels: { show: true, ypadding: -1 } //数据点标签
//renderer: $.jqplot.BarRenderer, //使用柱状图表示
//柱状体组之间间隔
//rendererOptions: {barMargin: 25}
},
axes: {
xaxis: {
label: "日期", //x轴显示标题
pad: 5,
renderer: $.jqplot.CategoryAxisRenderer, //x轴绘制方式
下载后可阅读完整内容，剩余4页未读，立即下载
点击了解资源详情
点击了解资源详情
点击了解资源详情
2015-06-25 上传
2019-04-23 上传
120 浏览量
2013-05-15 上传
164 浏览量
2010-01-13 上传
weixin_38680671
- 粉丝: 4
- 资源: 960
我的内容管理
展开
