1

I'm using jqplot to draw a curve, now problem with zoom, the graph will be moved to the right after zooming. The zoom example works, I don't know what's wrong in my implementation. Could anyone give me some hints? thanks!

Code:

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

1 回答 1

0

这不是什么大问题，通常当您放大绘图时，该绘图应该被缩放并且其他旁边的值应该被拉伸。如果发生这种情况，那就没什么问题了。

于 2012-12-08T06:29:10.670 回答