$.jqplot.config.enablePlugins = true;
l1 = [2, 3, 1, 4, 3];
l2 = [1, 4, 3, 2, 5];
line1=[['2008-09-30', 4], ['2008-10-30', 6.5], ['2008-11-30', 5.7], ['2008-12-30', 9], ['2009-01-30', 8.2]];
line2=[['2008-09-30', 3], ['2008-10-30', 5.5], ['2008-11-30', 5.7], ['2008-12-30', 10], ['2009-01-30', 9.2]];
plot2 = $.jqplot('chart2', [line1,line2], {
title:'Rotated Axis Text',
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
min:'August 30, 2008',
tickInterval:'1 month',
rendererOptions:{
tickRenderer:$.jqplot.CanvasAxisTickRenderer},
tickOptions:{formatString:'%b %#d, %Y', fontSize:'10pt', fontFamily:'Tahoma', angle:-40, fontWeight:'normal', fontStretch:1}
}
},
series:[{lineWidth:4, markerOptions:{style:'square'}}]
});
line1 = [[4, 1], [4, 2], [3, 3], [16, 4]];
line2 = [[3, 1], [7, 2], [4, 3], [3.125, 4]];
plot3 = $.jqplot('chart3', [line1, line2], {
//stackSeries: true,
legend: {
show: true,
location: 'se'
},
title: '条形图',
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
barPadding: 6,
barMargin: 10
}
},
series: [{
label: '1st Qtr'
},
{
label: '2nd Qtr'
}],
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ['Q1', 'Q2', 'Q3', 'Q4']
},
xaxis: {min: 0, max: 20, numberTicks:5}
}
});
line1 = [[4, 1], [4, 2], [3, 3], [16, 4]];
line2 = [[3, 1], [7, 2], [4, 3], [3.125, 4]];
plot3 = $.jqplot('chart3d', [line1, line2], {
stackSeries: true,
legend: {
show: true,
location: 'se'
},
title: '条形图',
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
barPadding: 6,
barMargin: 40
}
},
series: [{
label: '1st Qtr'
},
{
label: '2nd Qtr'
}],
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ['Q1', 'Q2', 'Q3', 'Q4']
},
xaxis: {min: 0, max: 20, numberTicks:5}
}
});
line1 = [4, 2, 9, 16];
line2 = [3, 7, 6.25, 3.125];
plot3b = $.jqplot('chart3b', [line1, line2], {
stackSeries: true,
legend: {
show: true,
location: 'nw'
},
title: '柱状图1',
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barPadding: 6,
barMargin: 40
}
},
series: [{
label: '1st Qtr'
},
{
label: '2nd Qtr'
}],
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ['Q1', 'Q2', 'Q3', 'Q4']
},
yaxis: {min: 0, max: 20, numberTicks:5}
}
});
line1 = [4, 2, 9, 16];
line2 = [3, 7, 6.25, 3.125];
plot3c = $.jqplot('chart3c', [line1, line2], {
legend: {
show: true,
location: 'nw'
},
title: '柱状图2',
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barPadding: 6,
barMargin: 20
}
},
series: [{
label: '1st Qtr'
},
{
label: '2nd Qtr'
}],
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ['Q1', 'Q2', 'Q3', 'Q4']
},
yaxis: {min: 0, max: 20, numberTicks:5}
}
});
//
line1 = [['item1', 3], ['item2', 7], ['item3', 2.5], ['item4', 6], ['item5', 5], ['item6', 4]];
line2 = [3, 7, 2.5, 6, 5, 4];
plot4 = $.jqplot('chart4', [line1], {
title: '饼图1',
seriesDefaults:{renderer:$.jqplot.PieRenderer},
legend:{show:true}
});
line1 = [['item1', 3], ['item2', 7], ['item3', 2.5], ['item4', 6], ['item5', 5], ['item6', 4]];
line2 = [3, 7, 2.5, 6, 5, 4];
plot4 = $.jqplot('chart4b', [line1], {
title: '饼图2',
seriesDefaults:{renderer:$.jqplot.PieRenderer, rendererOptions:{sliceMargin:4}},
legend:{show:true}
});
l1 = [2.2, 3, .6, 4.8, 3];
l2 = [1, 4, 3, 2, 5.7];
l3 = [1, 5, 6, 7, 5.7];
plot5 = $.jqplot('chart5', [l1, l2,l3]);
分享到:
相关推荐
jqPlot是jQuery生态的一部分,因此,如果你已经熟悉jQuery,那么使用jqPlot将会非常方便。 ### jqPlot基本概念 1. **图表对象**:jqPlot的核心是图表对象,通过创建一个新的图表实例,可以配置各种参数来定制图表...
强大的Jquery图表绘制插件 —— jqPlot jqPlot是一款基于jquery类库的图标绘制插件。通过jqPlot可以再网页中绘制线状、柱状、饼状等多种样式图表。而且,jqPlot具有插件可扩展性(Pluggability),你可以编写自己的...
**jqPlot:jQuery的高效画图插件** **1. jqPlot简介** jqPlot是基于JavaScript库jQuery的一个强大图表绘制插件,它提供了丰富的图表类型和自定义选项,使得在Web应用中创建交互式图表变得极其简单。jqPlot能够轻松...
jqPlot的基本使用步骤包括引入jQuery库和jqPlot库,然后选择一个DOM元素作为图表容器,并调用`.jqplot()`方法进行绘制。例如: ```html <script src="jquery.js"> <script src="jqplot.js"> <div id="chart1">...
使用jqPlot首先需要在项目中引入jQuery库,然后引入jqPlot的JavaScript和CSS文件。通常,这些文件位于dist目录下,包括`jquery.jqplot.js`和`jqplot.css`。在HTML头部添加链接即可。 2. **绘制线图** jqPlot的...
6. **文档支持**:`docs`目录中的文档提供了详细的API参考和示例,帮助开发者更好地理解和使用jqPlot。 ### 二、jqPlot的使用步骤 1. **引入依赖**:首先需要在HTML页面中引入jQuery库和jqPlot的主文件以及需要的...
### 使用jqPlot的基本步骤 1. **引入依赖**:在HTML文件中引入jQuery库和jqPlot的JS和CSS文件。 2. **准备数据**:整理你要展示的数据,可以是数组形式。 3. **选择容器**:在HTML中设置一个用于显示图表的div...
jQuery.jqPlot的核心理念是简化图表绘制过程,通过简洁的API和丰富的插件系统,使得开发者能够快速地将数据转化为直观的图形。它支持多种图表类型,包括但不限于线性图、散点图、面积图、饼图、条形图以及热力图,...
《jQuery.jqPlot 1.0.9:数据可视化库的深度解析》 在Web开发领域,数据可视化是一项至关重要的任务,它可以帮助用户理解和解读复杂的数据。jQuery.jqPlot是这样一款强大的JavaScript库,专为创建高质量的图表而...
安装和使用jqPlot非常简单,只需在HTML文件中引入相关依赖,然后编写几行JavaScript代码,就可以快速创建出高质量的图表。 总的来说,jQuery.jqPlot是一个功能强大且易于使用的图表插件,它以jQuery为基础,提供...
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
在实际应用中,我们通常会遵循以下步骤来使用jQuery.jqPlot: 1. **引入库文件**:在HTML文档中添加jqPlot的JS和CSS引用,确保它们在页面加载时可用。 ```html <link rel="stylesheet" type="text/css" href="...
3. **示例文件**:示例文件通常包含HTML和JavaScript代码,展示了如何在实际项目中使用jqPlot,是学习使用jqPlot的好材料。 4. **文档**:如果压缩包中包含文档,将帮助开发者了解jqPlot的API、配置选项和最佳实践...
使用jqPlot时,首先需要在HTML文件中引入jQuery库和jqPlot的JavaScript文件,通常还有其所需的CSS文件。jqPlot的`dist`目录通常包含这些资源文件。例如: ```html <script src="path/to/jquery.js"> ...
这份文档详细介绍了如何安装、配置以及使用jqPlot创建图表,帮助开发者快速上手。 总的来说,jQuery.jqPlot 0.7r635是一款强大的图表插件,无论你是新手还是经验丰富的开发者,都能从中找到合适的工具来呈现你的...
使用jqPlot的步骤大致如下: 1. 引入jQuery库:jqPlot依赖jQuery,所以首先要确保页面已经加载了jQuery。 2. 引入jqPlot核心文件:包括jqplot.core.js,jqplot.vmlRenderer.js等,它们提供了图表绘制的核心功能和...
### jQuery插件 Jqplot图表实例知识点解析 #### 一、概述 Jqplot 是一个基于 jQuery 的图表绘制插件,它可以用来创建多种类型的图表,包括折线图、柱状图、饼图等。该插件支持丰富的配置选项,允许用户自定义图表...
在本项目中,jQuery用于初始化jqPlot插件,设置图表的参数,以及处理用户与图表的交互事件。 `jqplot.css`可能是包含jqPlot插件样式规则的文件,用于调整图表的外观和布局,确保其与网页设计风格协调一致。 `m_...
**Jqplot - jQuery数据图插件** Jqplot是一款基于jQuery库的开源图表插件,主要用于在网页上创建各种动态、...在“jquery.jqplot.1.0.0b2_r1012”这个版本中,包含了完整的源码和示例,是学习和使用Jqplot的好起点。