Javascript jqPlot图形在缩放后向右移动_Javascript_Zooming_Jqplot

Javascript jqPlot图形在缩放后向右移动

javascript

Javascript jqPlot图形在缩放后向右移动,javascript,zooming,jqplot,Javascript,Zooming,Jqplot,我正在使用jqplot绘制一条曲线，现在出现缩放问题，缩放后图形将移到右侧。zoom示例有效，我不知道我的实现中出现了什么问题。谁能给我一些提示吗？谢谢代码：变焦试验上行重置缩放 $（函数（）{ 变量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

我正在使用jqplot绘制一条曲线，现在出现缩放问题，缩放后图形将移到右侧。zoom示例有效，我不知道我的实现中出现了什么问题。谁能给我一些提示吗？谢谢

代码：


变焦试验
上行
重置缩放
$（函数（）{
变量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]  ]
];
变量选项={
系列默认值：{
showMarker:false，
邻居保留：-1
},
图例：{
秀：没错，
位置：“外部网格”
},
/*荧光灯：{
秀：没错，
工具提示位置：“n”，
工具提示：“xy”，
useAxesFormatters:true
},*/
光标：{
秀：没错，
zoom:对
}
};
变量plotUp1=$.jqplot（'chartUp1'，dataUp1，$.extend（{}，options{
轴线：{
xaxis：{
渲染器：$.jqplot.DateAxisRenderer，
tickRenderer:$.jqplot.CanvasAxisTickRenderer，
选择：{
角度：-45，
格式字符串：“%m/%d%H:%m:%S”
},
分钟：“2012-07-1206:45:52”，
马克斯：“2012-07-1206:56:22”
}
},
系列：[
{标签：'发送速率'}
]
}));
$（'#chartUp1ResetZoom'）。单击（函数（）{
plotUp1.resetZoom（）；
});
});

这不是什么大问题，通常当你放大一个绘图时，绘图应该被放大，其他值应该被拉伸。如果发生这种情况，没有什么问题

<!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>