最近需要用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瀏覽器強大的調試功能！！！