1
我正在使用jqplot繪製曲線，現在放大問題，放大後圖將移動到右側。縮放的例子起作用，我不知道我的實現有什麼問題。任何人都可以給我一些提示嗎？謝謝！jqPlot圖在放大後向右移動
代碼：
<!doctype html>
<html lang="en">
<head>
<title>Zoom Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
</head>
<body>
<div style="padding-left: 100px;">
<h3>Up Link</h3>
<div id="chartUp1" style="height:300px; width:800px;"></div>
<div><button id="chartUp1ResetZoom">Reset Zoom</button></div>
</div>
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript">
$(function(){
var dataUp1 = [
[ ['2012-07-12 06:45:52', 0] ,['2012-07-12 06:46:12', 969] ,['2012-07-12 06:46:23', 672] ,['2012-07-12 06:46:33', 835] ,['2012-07-12 06:46:43', 339] ,['2012-07-12 06:46:53', 1047] ,['2012-07-12 06:47:04', 1004] ,['2012-07-12 06:47:14', 107] ,['2012-07-12 06:47:24', 51] ,['2012-07-12 06:47:34', 40] ,['2012-07-12 06:47:44', 711] ,['2012-07-12 06:47:54', 845] ,['2012-07-12 06:48:04', 1005] ,['2012-07-12 06:48:15', 716] ,['2012-07-12 06:48:25', 596] ,['2012-07-12 06:48:35', 748] ,['2012-07-12 06:48:45', 78] ,['2012-07-12 06:48:55', 49] ,['2012-07-12 06:49:05', 60] ,['2012-07-12 06:49:15', 57] ,['2012-07-12 06:49:25', 67] ,['2012-07-12 06:49:36', 468] ,['2012-07-12 06:49:46', 371] ,['2012-07-12 06:49:56', 865] ,['2012-07-12 06:50:06', 516] ,['2012-07-12 06:50:16', 982] ,['2012-07-12 06:50:26', 874] ,['2012-07-12 06:50:37', 571] ,['2012-07-12 06:50:47', 211] ,['2012-07-12 06:50:57', 238] ,['2012-07-12 06:51:07', 363] ,['2012-07-12 06:51:17', 29] ,['2012-07-12 06:51:27', 182] ,['2012-07-12 06:51:37', 157] ,['2012-07-12 06:51:48', 48] ,['2012-07-12 06:51:58', 57] ,['2012-07-12 06:52:08', 529] ,['2012-07-12 06:52:18', 47] ,['2012-07-12 06:52:28', 56] ,['2012-07-12 06:52:39', 90] ,['2012-07-12 06:52:49', 537] ,['2012-07-12 06:52:59', 423] ,['2012-07-12 06:53:09', 222] ,['2012-07-12 06:53:19', 306] ,['2012-07-12 06:53:29', 203] ,['2012-07-12 06:53:39', 38] ,['2012-07-12 06:53:50', 533] ,['2012-07-12 06:54:00', 561] ,['2012-07-12 06:54:10', 280] ,['2012-07-12 06:54:20', 422] ,['2012-07-12 06:54:31', 868] ,['2012-07-12 06:54:40', 583] ,['2012-07-12 06:54:51', 331] ,['2012-07-12 06:55:01', 356] ,['2012-07-12 06:55:11', 586] ,['2012-07-12 06:55:21', 492] ,['2012-07-12 06:55:31', 203] ,['2012-07-12 06:55:42', 237] ,['2012-07-12 06:55:52', 1022] ,['2012-07-12 06:56:02', 1033] ,['2012-07-12 06:56:12', 346] ,['2012-07-12 06:56:22', 68] ]
];
var options = {
seriesDefaults: {
showMarker: false,
neighborThreshold: -1
},
legend: {
show: true,
placement: 'outsideGrid'
},
/*highlighter: {
show: true,
tooltipLocation: 'n',
tooltipAxes: 'xy',
useAxesFormatters: true
},*/
cursor: {
show: true,
zoom: true
}
};
var plotUp1 = $.jqplot('chartUp1', dataUp1, $.extend({}, options, {
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -45,
formatString: '%m/%d %H:%M:%S'
},
min: '2012-07-12 06:45:52',
max: '2012-07-12 06:56:22'
}
},
series: [
{ label: 'Send Rate' }
]
}));
$('#chartUp1ResetZoom').click(function(){
plotUp1.resetZoom();
});
});
</script>
</body>
</html>