jqPlot是一款生成简易前端图形的纯js的jquery插件,能生成折线图、饼状图、柱状图及复合图形。依赖于jquery-version.js库文件。
应用
引用相应的文件
<link href="${ctx}/resources/jqplot/jquery.jqplot.min.css" rel="stylesheet" />
<!--相关脚本-->
<script type="text/javascript" src="${ctx}/resources/jquery/jquery-1.8.3.min.js"></script>
<script src="${ctx}/resources/jqplot/jquery.jqplot.min.js"></script>
<script src="${ctx}/resources/jqplot/excanvas.min.js"></script>
<!--针对x轴,设置不同的渲染机制及 高亮插件的使用 -->
<script src="${ctx}/resources/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script src="${ctx}/resources/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script src="${ctx}/resources/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script src="${ctx}/resources/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="${ctx}/resources/jqplot/plugins/jqplot.highlighter.min.js"></script>
创建相应的接受容器
必须指定容器的宽高,及id标示属性
<div id="chart" style="height: 400px; width: 980px;"></div>
装载数据,展示报表
加载数据,通过上面的id属性展示在特定的容器内
//数据集
var plot1 = $.jqplot('chart', [line1,line2,line3], {
title:'${title}',//标题
seriesColors: ["#ffcccc","#ff0000","#00ff00"],//数据集上的节点的对应颜色
axesDefaults: {//默认的渲染风格
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: 70, //倾斜角度
fontSize: '10pt'//字体大小
}
},
axes:{
xaxis:{
label: '日期',
//renderer: $.jqplot.CategoryAxisRenderer,
renderer: $.jqplot.DateAxisRenderer, //x轴绘制方式 LinearAxisRenderer
tickOptions:{
formatString:'%Y-%m-%d' --x轴展示的格式化
},
//tickInterval:8,//界面坐标线的间隔,针对于日期渲染方式
labelOptions: {
fontSize: '12pt'
}
},
yaxis:{
tickOptions:{
formatString:'%.2f',
angle:0
},
labelOptions:{
fontSize: '12pt'
},
label:'价格',
min:${minvalueY} // set the min value for the y axis
}
},
highlighter:{//高亮插件
show: true, //鼠标选中是否高亮
sizeAdjust: 7.5, //当鼠标移动到数据点上时,数据点扩大的增量增量
tooltipAxes: 'xy', //提示信息框显示数据点那个坐标轴上的值,目前有横/纵/横纵三种方式。值分别为 x, y or xy.
//showMarker:true,
//yvalues: 4,
formatString:'<table class="jqplot-highlighter"><tr><td>日期:</td><td>%s</td></tr><tr><td>价格:</td><td>%.2f</td></tr></table>'
//showTooltip: true, //是否显示提示信息栏
//tooltipLocation: 'nw', //提示信息显示位置(英文方向的首写字母): n, ne, e, se, s, sw, w, nw.
//fadeTooltip: true, //设置提示信息栏出现和消失的方式(是否淡入淡出)
//tooltipFadeSpeed: "slow",//设置提示信息栏淡入淡出的速度:slow, def, fast, 或者是一个毫秒数的值.
//tooltipOffset: 2, //提示信息栏据被高亮显示的数据点的偏移位置,以像素计。
//tooltipAxes: 'xy', //提示信息框显示数据点那个坐标轴上的值,目前有横/纵/横纵三种方式。值分别为 x, y or xy.
//tooltipSeparator: ', ', //提示信息栏不同值之间的间隔符号
//useAxesFormatters: false, //提示信息框中数据显示的格式是否和该数据在坐标轴上显示格式一致
//tooltipFormatString: '<b><i><span style="color:red;" mce_style="color:red;">hello</span></i></b> %.2f---%s'
} ,
series:[
{
lineWidth: 2, //指定折线的宽度
markerOptions: { size: 5} //为了业务逻辑需要,设置小,会被后面重绘覆盖掉
},
{
showLine:false, //只显示节点元素,不显示线
markerOptions: { size: 10}
}
,
{
showLine:false,
markerOptions: { size: 10}
}
]
});
数据组织形式,为了和jqplot的数据格式保持一致,使用了org.codehaus.jackson.map.ObjectMapper类
SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
ObjectMapper mapper = new ObjectMapper();
mapper.setDateFormat(sdf);
List<Object[]> totalRevenue = new ArrayList<Object[]>();//所有值 数据对象是对应的x与y的数值
String line1 = mapper.writeValueAsString(totalRevenue);//相应的字符串
效果为了在折线上显示两种不同的数据,且用一个x坐标轴,使用了全部展示,并用在后面进行重绘(不显示线条且节点扩大覆盖)的思路。
效果如下:
- 浏览: 48908 次
- 性别:
- 来自: 北京
相关推荐
1.7.4 用差集实现关系除法运算准备数据:skill varchar(100) not nullemp varchar(100) not null,skill
AutoJs源码-交集_并集_差集_去重(1)。本资源购买前提醒:本源码都是实际autojs项目模板,安装好autojs直接运行即可打开。1、支持低版本autojs。2、资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您...
给出两个以行为单位文本文件的差集的命令行工具。 功能为输出当前目录下在文本文件prog中且不在文本文件list中的行。 可以用重定向将结果输出到文件中,比如: lackof >result 注意文件无后缀名 比如文件prog中有4行...
redis c# 数据优化 差集 c#redis GetDifferencesFromSet
JavaScript应用实例-交集_并集_差集_去重(1).js
set1 -- 必需,要查找相同元素的集合 set2 -- 必需,可以是任何序列,可以多个,多个使用逗号 , 隔开 若是字典,按键比较 返回值:返回一个新的集合 set1={1,2,3} set2={3,4,5,2} list1=[2,3] dict1={2:9,'b':10} ...
excel取两列数据交集、并集、差集 excel取两列数据交集、并集、差集 excel取两列数据交集、并集、差集
Set(集合)——对称差集 Set(集合)——对称交集 对称差集:取集合 A 和 B 中不属于 A&B 的元素 1)运算符 ^ 2) symmetric_ difference() 方法 3) symmetric_ difference_update() 方法 Set(集合)——对称差集...
JAVA获取两个数据量较大的ArrayList的交集、差集以及并集,记录一下以便查阅。JAVA获取两个数据量较大的ArrayList的交集、差集以及并集,记录一下以便查阅。JAVA获取两个数据量较大的ArrayList的交集、差集以及并集...
数据据表列比较工具,输出差集
CAD三维绘图教程(3)—差集
C# 两个datatable中的数据快速比较返回交集 并集或差集 网上的例子。但没有实例下载。新人有点难明白。对初学者还是有点难。完整源码。让新人学习。
一款便捷的数据比对工具,可进行单列数据替重、求A组数据剔除B组数据(相当于SQL中的minus)、求A组数据和B组数据的交集。可进行号码、编号、串号等数据的比对整理工作,非常方便。
数据结构、算法相关的资源 数据结构、算法相关的资源 数据结构、算法相关的资源 数据结构、算法相关的资源 数据结构、算法相关的资源 数据结构、算法相关的资源 数据结构、算法相关的资源 数据结构、算法相关的资源 ...
2、集合的元素限定为十进制数,程序应对出现重复的数据进行过滤,即使得链表中没有重复数据。 3、显示两个集合的内容及其并集、交集和差集的内容。 4、要求不改变原来的集合,并集、交集和差集分别另外存放。
JavaScript应用实例-求差集.js
delphi Memo及tstrlists的交集差集并集
这些数据类型都支持push/pop、add/remove及取交集并集和差集及更丰富的操作,而且这些操作都是原子性的。在此基础上,redis支持各种不同方式的排序。与memcached一样,为了保证效率,数据都是缓存在内存中。区别的是...
杭电上的ppt教程,教你怎么用并差集解题
矢量是数学中的一个重要概念,它可以分为有序矢量和无序矢量。在数学中,我们经常需要对矢量之间的关系进行分析,包括求交集、并集和差集等运算。...例如,A={1, 2, 3, 4}、B={3, 4, 5, 6},那么A与B的差集为{1, 2}等等