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实现了.找资料的过程中没有发现有系统的文章, ...
随机推荐
- 静态方法和类成员方法（Python）
静态方法和成员方法分别在创建时分别被装入Staticmethod 类型和 Classmethod类型的对象中.静态方法的定义没有 self参数,且能够被类本身直接调用,类方法在定义时需要名为 cls的 ...
- php基础复习（一）smarty模板
一.基本配置第一步:下载smarty:官网www.smarty.net第二步:加载类文件和更改配置 1. //加载类文件 require_once '../libs/Smarty.class.php' ...
- 2016 Al-Baath University Training Camp Contest-1 C
Description Rami went back from school and he had an easy homework about bitwise operations (and,or, ...
- fildder学习
http://www.cnblogs.com/strick/p/4570006.html#first
- update-alternatives命令
快速复习: 增加:$sudo update-alternatives --install 程序生成的快捷方式的目标完整位置 程序名 程序其中一个版本的完整路径 配置:$sudo update-alte ...
- python 列表去重(数组)的几种方法
一.方法1 代码如下 复制代码 ids = [1,2,3,3,4,2,3,4,5,6,1] news_ids = [] for id in ids: if id not in news_id ...
- MYSQL写入数据时报错ERROR 1366 (HY000): Incorrect string value: '\xE8\x8B\xB1\xE5\xAF\xB8...' for c 插入中文不能插入
先把原先你创建的这个表删除,然后 CREATE TABLE IF NOT EXISTS tdb_goods( goods_id SMALLINT UNSIGNED PRIMARY KEY AUTO_I ...
- Metasploit辅助模块
msf > show auxiliary Auxiliary ========= Name Di ...
- [SAP ABAP开发技术总结]内表操作
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- [Java解惑]数值表达式
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...