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实现了.找资料的过程中没有发现有系统的文章, ...
随机推荐
- TCP三次握手
TCP协议下,客户的和服务器的连接过程称为“三次握手” 第一次握手:建立连接时,客户的发送SYN包到服务器,并进入SYN_SEND状态,等待服务器确认. 第二次握手:服务器收到SYN包,必须确 ...
- 土豪聪要请客(stol)
土豪聪要请客(stol) 众所周知,聪哥(ndsf)是个土豪,不过你们不知道的是他的MZ和他的RMB一样滴多…… 某天土豪聪又赚了10^10000e的RMB,他比较开心,于是准备请客.他在自己在XX星 ...
- 零零碎碎写的shell脚本（二）：一键修改网络配置信息脚本
#!/bin/bash ip_mod=$ mask_mod=$ gw_mod=$ dns_mod=$ hostname_mod=$ hosts=/etc/hosts ifcfg=/etc/syscon ...
- Scala循环操作
val buf = new scala.collection.mutable.ArrayBuffer[Int] for (i <- 0 to 10) { buf += i } buf += 11 ...
- CAShapeLayer
之前讲过CALayer动画相关知识,再来看看更加复杂的CAShapeLayer相关的动画知识. 普通CALayer在被初始化时是需要给一个frame值的,这个frame值一般都与给定view的boun ...
- ios项目中引用其他项目复习
ios项目中引用其他开源项目,今天再次复习了,记个备注. 1. 将开源项目的.xcodeproj拖入项目frameworks 2. Build Phases下 Links Binary With Li ...
- 模块"xxxx.dll"已加载，但对DllRegisterServer的调用失败，错误代码为 XXXXXXXXX
WIN7.WIN8 注册 卸载dll 报错: 模块"xxxx.dll"已加载,但对DllRegisterServer的调用失败,错误代码为 XXXXXXXXX 解决方法: 若为 ...
- 解决Duilib创建的win32窗口拖到屏幕上边缘自动最大化
转载:http://bbs.csdn.net/topics/390842294 使用Duilib创建窗口的时候,假如有这样一个需求: 1.窗口大小规定 2.不可拖拽改变窗口大小 3.双击标题栏禁止最大 ...
- MSM8909+Android5.1.1之系统烧录
1. 安装高通USB驱动 图1 安装成功后,同时按下设备的音量+和音量-按键,且用USB连接到设备上,在设"设备管理器--->端口"下面看到USB虚拟的端口,如下: ...
- js对cookie的操作，包括增，取，删
在其他人都开会到时间里,我偷偷摸哦的试了一下cookie,唉,从来没有用过cookie,慢慢的知识忘光了,还好这次偷偷摸摸的做出来了,虚,大家都别出声啊 <!DOCTYPE html> & ...