Jqplot使用总结之二(双Y轴)
最近需要用Jqplot做双Y轴的Chart图，首先我找到了文档上的例子并对数据做了一些调整：
1.例子展示:
var s1 = [["2002-01-01", 112000], ["2003-01-01", 122000], ["2004-01-01", 104000], ["2005-01-01", 99000], ["2006-01-01", 121000],
["2007-01-01", 148000], ["2008-01-01", 114000], ["2009-01-01", 133000], ["2010-01-01", 161000]];
var s2 = [["2002-01-01", 10200], ["2003-01-01", 10800], ["2004-01-01", 11200], ["2005-01-01", 11800], ["2006-01-01", 12400],
["2007-01-01", 12800], ["2008-01-01", 13200], ["2009-01-01", 12600], ["2010-01-01", 13100]];
plot1 = $.jqplot("systolicChart2", [s2, s1], {
animate: true,
animateReplot: true,
cursor: {
show: true,
zoom: true,
looseZoom: true,
showTooltip: false
},
series:[
{
pointLabels: {
show: true
},
showHighlight: false,
yaxis: 'y2axis',
rendererOptions: {
animation: {
speed: 2500
},
barWidth: 15,
barPadding: -15,
barMargin: 0,
highlightMouseOver: false
}
},
{
rendererOptions: {
animation: {
speed: 2000
}
}
}
],
axesDefaults: {
pad: 0,
tickOptions: {
angle: -30
},
},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer, },
yaxis: {
tickOptions: {
formatString: "$%'d"
},
rendererOptions: {
forceTickAt0: true
}
},
y2axis: {
tickOptions: {
formatString: "$%'d"
},
rendererOptions: {
alignTicks: true,
forceTickAt0: true
}
}
},
highlighter: {
show: true,
showLabel: true,
tooltipAxes: 'y',
sizeAdjust: 7.5 , tooltipLocation : 'ne'
}
});
显示效果展示：
2. 由于需要从数据库中读取数据并且X轴需要显示为日期格式，所以我将从数据库中获取的数据的日期格式转为"yyyy-MM-dd":
另外，由于需要对数据进行重新组织，可能会用到JS中的Push()方法，在定义对象并调用Push()方法时，无论对象定义为new Array()或[]，对结果均无任何影响。
function getPointList(pList) {
var DataLists = [];//无论此处定义为new Array()或[]，均对显示效果无影响。
for (var x in pList) {
DataLists.push([pList[x].PointShowDate, pList[x].PointValue]);
}
return DataLists;
}
完成数据组织并时调用呈现代码时，总是无法显示Chart，相关代码如下：
$.jqplot(ChartId, [LineList, LineListBG], {
animate: true,
animateReplot: true,
seriesColors: ColorList,
title: {
text: v_Title,
textAlign: 'left'
},
seriesDefaults: {
show: true,
lineWidth: 1,
pointLabels: {
show: false,
formatString: "%.0f",
location: "s",
ypadding: 1,
},
markerOptions: {
show: true,
lineWidth: 1,
size: 12
}
},
series: [{ yaxis: 'y2axis' }],
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
show: true,
ticks: X_Ticks,
tickOptions: {
formatString: '%d %b %n %Y %n %a',
show: true,
showGridline: false,
showMark: false
},
showTicks: true,
useSeriesColor: true,
rendererOptions: { drawBaseline: false }
},
yaxis: {
show: true,
ticks: Y_Ticks,
tickOptions: {
formatString: '%.0f',
mark: 'inside',
show: true,
showMark: false,
showGridLine: false,
showLabel: true,
},
label: 'Blood Pressure',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
useSeriesColor: true,
showTickMarks: true,
rendererOptions: { drawBaseline: false }
},
y2axis: {
show: true,
ticks: Y_BGTicks,
tickOptions: {
formatString: '%.0f',
mark: 'inside',
show: true,
showMark: true,
showGridLine: false,
showLabel: true,
},
label: 'Glucose',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
useSeriesColor: true,
showTickMarks: true,
rendererOptions: { drawBaseline: false }
}
},
highlighter: {
show: true,
sizeAdjust: 4,
tooltipContentEditor: tooltipContentEditor,
tooltipLocation: 'n',
},
cursor: {
show: false
},
grid: {
background: '#FFFFFF',
gridLineColor: '#cccccc',
shadow: false,
drawBorder: false,
borderColor: '#FFFFFF',
borderWidth: 2,
},
legend: {
show: false,
location: 'ne',
background: '#FFFFFF',
placement: "insideGrid",
fontSize: 5
}
});
3. 修改第一步的代码，我怀疑是定义对象并调用Push()方法时，对象定义为new Array()或[]时引起了异常：
于是修改第一步的代码为如下：
$(document).ready(function () {
var s1 = new Array();
var s2 = new Array();
s1.push(["2002-01-01", 112000]);
s1.push(["2003-01-01", 122000]);
s1.push(["2004-01-01", 104000]);
s1.push(["2005-01-01", 99000]);
s1.push(["2006-01-01", 121000]);
s1.push(["2007-01-01", 148000]);
s1.push(["2008-01-01", 114000]);
s1.push(["2009-01-01", 133000]);
s1.push(["2010-01-01", 161000]);
s2.push(["2002-01-01", 10200]);
s2.push(["2003-01-01", 10800]);
s2.push(["2004-01-01", 11200]);
s2.push(["2005-01-01", 11800]);
s2.push(["2006-01-01", 12400]);
s2.push(["2007-01-01", 12800]);
s2.push(["2008-01-01", 13200]);
s2.push(["2009-01-01", 12600]);
s2.push(["2010-01-01", 13100]);
$.jqplot("systolicChart2", [s2, s1], {
animate: true,
animateReplot: true,
cursor: {
show: true,
zoom: true,
looseZoom: true,
showTooltip: false
},
series:[
{
pointLabels: {
show: true
},
showHighlight: false,
yaxis: 'y2axis',
rendererOptions: {
animation: {
speed: 2500
},
barWidth: 15,
barPadding: -15,
barMargin: 0,
highlightMouseOver: false
}
},
{
rendererOptions: {
animation: {
speed: 2000
}
}
}
],
axesDefaults: {
pad: 0,
tickOptions: {
angle: -30
},
},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
},
yaxis: {
tickOptions: {
formatString: "$%'d"
},
rendererOptions: {
forceTickAt0: true
}
},
y2axis: {
tickOptions: {
formatString: "$%'d"
},
rendererOptions: {
alignTicks: true,
forceTickAt0: true
}
}
},
highlighter: {
show: true,
showLabel: true,
tooltipAxes: 'y',
sizeAdjust: 7.5 , tooltipLocation : 'ne'
}
});
});
结果可以正常显示，如下图所示：
然后修改第二步的代码为如下：
$(document).ready(function () {
var s3 = [];
var s4 = [];
s3.push(["2016-04-28",105]);
s3.push(["2016-04-29",90]);
s3.push(["2016-05-18",80]);
s3.push(["2016-05-18",80]);
s4.push(["2016-05-04",17]);
s4.push(["2016-05-08",8]);
s4.push(["2016-05-12",6]);
s4.push(["2016-05-16", 4]);
$.jqplot(ChartId, [s3, s4], {
animate: true,
animateReplot: true,
title: {
text: v_Title,
textAlign: 'left'
},
seriesDefaults: {
show: true,
lineWidth: 1,
pointLabels: {
show: false,
formatString: "%.0f",
location: "s",
ypadding: 1,
},
markerOptions: {
show: true,
lineWidth: 1,
size: 12
}
},
series: [{ yaxis: 'y2axis' }],
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
},
yaxis: {
label: 'Blood Pressure',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
},
y2axis: {
label: 'Glucose',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
}
},
highlighter: {
show: true,
sizeAdjust: 4,
tooltipContentEditor: tooltipContentEditor,
tooltipLocation: 'n',
},
cursor: {
show: false
},
grid: {
background: '#FFFFFF',
gridLineColor: '#cccccc',
shadow: false,
drawBorder: false,
borderColor: '#FFFFFF',
borderWidth: 2,
},
legend: {
show: false,
location: 'ne',
background: '#FFFFFF',
placement: "insideGrid",
fontSize: 5
}
});
});
结果可以正常显示：
4. 启用Google Chrome的调试：
跟踪第二步无法正常显示的代码：
跟踪第三步可以正常显示的代码：
错误显而易见；
5. 修改代码并显示正确结果：
$(document).ready(function () {
$.jqplot(ChartId, [LineListBG[0][0], LineList[0][0]], {
animate: true,
animateReplot: true,
//seriesColors: ColorList,
title: {
text: v_Title,
textAlign: 'left'
},
seriesDefaults: {
show: true,
lineWidth: 1,
pointLabels: {
show: false,
formatString: "%.0f",
location: "s",
ypadding: 1,
},
markerOptions: {
show: true,
lineWidth: 1,
size: 12
}
},
series: [{ yaxis: 'y2axis' }],
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
show: true,
ticks: X_Ticks,
tickOptions: {
formatString: '%d %b %n %Y %n %a',
show: true,
showGridline: false,
showMark: false
},
showTicks: true,
//useSeriesColor: true,
rendererOptions: { drawBaseline: false }
},
yaxis: {
show: true,
ticks: Y_Ticks,
tickOptions: {
formatString: '%.0f',
mark: 'inside',
show: true,
showMark: false,
showGridLine: false,
showLabel: true,
},
label: 'Blood Pressure',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
//useSeriesColor: true,
showTickMarks: true,
rendererOptions: { drawBaseline: false }
},
y2axis: {
show: true,
ticks: Y_BGTicks,
tickOptions: {
formatString: '%.0f',
mark: 'inside',
show: true,
showMark: true,
showGridLine: false,
showLabel: true,
},
label: 'Glucose',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
//useSeriesColor: true,
showTickMarks: true,
rendererOptions: { drawBaseline: false }
}
},
highlighter: {
show: true,
sizeAdjust: 4,
tooltipContentEditor: tooltipContentEditor,
tooltipLocation: 'n',
},
cursor: {
show: false
},
grid: {
background: '#FFFFFF',
gridLineColor: '#cccccc',
shadow: false,
drawBorder: false,
borderColor: '#FFFFFF',
borderWidth: 2,
},
legend: {
show: false,
location: 'ne',
background: '#FFFFFF',
placement: "insideGrid",
fontSize: 5
}
});
});
最终结果显示：
6. 总结：
在只有一个X/Y轴时，X轴的英文日期格式可以被正确识别，即在传入数据时可以直接写对象名称而不用加"[]":如下所示：
$(document).ready(function () { $.jqplot(ChartId, LineList, {}）
补充(Supplement): The parameters of property tooltipContentEditor(str, seriesIndex, pointIndex, plot)(tooltipContentEditor参数用法):
str:The value of current point;
seriesIndex:The thread number,if there are 2 threads in current chart and you move the cursor to the second thread,the value will be 2;
pointIndex:The order number of the point,such as 1,2,3,4... ...
plot:Can includes all of and all kinds of the value you want display when you move the cursor to any point,you can get what you want from this parameter!
7. 感谢
最后衷心感谢Google Chrome浏览器强大的调试功能！！！
Jqplot使用总结之二(双Y轴)的更多相关文章
- matlab画二维直方图以及双y轴坐标如何修改另一边y轴的颜色
1.首先讲一下如何用hist画二维直方图 x=[- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ...
- highchart 设置双Y轴坐标 双x轴坐标方法
我们的图表一旦引入了两种不同单位或者数量级相差很大的数据以后,这时候需要两种坐标对其进行计量. 下面以设置双Y轴为例, y轴坐标的参数设置成: yAxis: [{ title: { text: '坐标 ...
- 绘制复数图形和双y轴图形
clearclct=0:0.1:2*pi;x=sin(t);y=cos(t);z=x+i*y;subplot(1,3,1)plot(t,z,'r') %注:这种方式下,不论参数t,z哪个是复数,都将忽 ...
- MSChart使用之双Y轴使用
protected void SearchChart() { Chart1.ChartAreas.Clear(); Chart1.Series.Clear(); ChartArea _ChartAre ...
- echarts使用笔记四:双Y轴
1.双Y轴显示数量和占比 app.title = '坐标轴刻度与标签对齐'; option = { title : { //标题 x : 'center', y : 5, text : '数量和占比图 ...
- Python科学计算技巧积累四——双y轴图像绘制
双y轴图像具有单y轴图像没有的对比效果,在MATLAB中有plotyy函数可以实现,Python的实现方式没有MATLAB那样方便,不过实现效果却也不见得差. 以往我常用的绘图命令是import ma ...
- 【Python】matplotlib 双y轴绘制及合并图例
1.双y轴绘制 关键函数:twinx() 问题在于此时图例会有两个. # -*- coding: utf-8 -*- import numpy as np import matplotlib.pypl ...
- Python教程：matplotlib 绘制双Y轴曲线图
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:数据皮皮侠 双X轴的可以理解为共享y轴 ax1=ax.twiny() ...
- Python实现双X轴双Y轴绘图
诈尸人口回归.这一年忙着灌水忙到头都掉了,最近在女朋友的提醒下终于想起来博客的账号密码,正好今天灌水的时候需要画一个双X轴双Y轴的图,研究了两小时终于用Py实现了.找资料的过程中没有发现有系统的文章, ...
随机推荐
- Wampserver3.0.0设置语言为中文无效
打开配置文件"wampmanager.conf",将language改成chinese,再从右键的语言选择中选中文. 这个配置文件有两个,改第一个双引号里的,第二个没有引号的不要改 ...
- Testing Round #12 A
A. Divisibility time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...
- wpfのpack协议
当引用的资源需要做成dll时,要用此协议 协议:pack:// 授权:有两种.一种用于访问编译时已经知道的文件,用application:///.一种用于访问编译时不知道.运行时才知道的文件 ...
- 2016年6月29日 星期三 --出埃及记 Exodus 14:26
2016年6月29日 星期三 --出埃及记 Exodus 14:26 Then the LORD said to Moses, "Stretch out your hand over the ...
- HDU 5670 Machine
Machine Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Sub ...
- 怎样为DataTable设置主键及找行数据
只要是数据集中都应该存在主键,以确定数据集中唯一的值.那么,我们要如何为DataTable设置主键及利用主键在DataTable索引值呢? 步骤/方法 为DataTable设置主键 DataT ...
- Linux下新的网络管理工具ip替代ifconfig零压力
如果你使用 Linux 足够久,那么你自然知道一些工具的来与去.2009年 Debian 开发者邮件列表宣布放弃使用缺乏维护的 net-tools 工具包正是如此.到今天 net-tools 仍然被部 ...
- Eclipse新建工程编译R cannot be resolved to a variable问题
Eclipse新建工程编译R cannot be resolved to a variable问题 新建工程编译提示R cannot be resolved to a variable 图1 然后打开 ...
- ubuntu Linux 测试PHP却提示下载文件的解决办法
ubuntu Linux 测试PHP却提示下载文件的解决办法 一般这种情况都是在刚刚开始配置环境时出现的, 输入 sudo a2enmod php5 看提示如果出现“$ This module ...
- 关于float的感悟
给元素设置了float样式后,最终的结果是: 1:这个元素漂浮起来, 2:其他的元素位置可以视为 这个元素不存在 的时候的位置:但是float样式还是对整个页面有所影响 3:float的影响就是他附近 ...