2013-03-15 72 views
0

我有以下代码以从JSON/AJAX请求绘制数据jqplot垫不工作

function plotit(data){ 
     $.jqplot.config.enablePlugins = true; 
     $("#jqplot-chart1").empty(); 
      plot1 = $.jqplot('jqplot-chart1', data,{ 
       axesDefaults: { pad: 1.2}, 
       title: 'data', 
       animate: true, 
       animateReplot: true, 
       axes: { 
        xaxis: { 
          label: "---", 
          tickOptions: {formatString: '%d-%m-%Y'}, // ex 02-09-2002,23:09:55 - %d 
          renderer: $.jqplot.DateAxisRenderer 
         }, 
         yaxis: { 
          label: "Y " 
         } 
       }, 
       cursor:{ 
        zoom: true, 
        showTooltip : true, 
        constrainZoomTo : 'x', 
        showVerticalLine : true 
       } 
      } 
    ); 
    } 

这是JSON响应数据的例子:

[[["2013-03-02 00:00:00","2"],["2013-03-01 00:00:00","72"],["2013-02-28 00:00:00","26"],["2013-02-27 00:00:00","67"],["2013-02-26 00:00:00","48"],["2013-02-25 00:00:00","50"]]] 

但是当我情节基本上我有两个问题: - 首先是情节的顶部和最大值之间的填充是巨大的,我想动态调整剧情的高度(图片中的红色箭头) 第二个是右边的最后一个值被附加到bord上呃的情节(图片中的蓝色箭头) ![Plot结果] [1]

任何人都可以帮助我吗?

这是形象,解释这个问题:

http://img7.imageshack.us/img7/963/sanstitrebtt.png

回答

2

你可以使用渲染后您的dataBounds值:

var minY = plot2.axes.yaxis._dataBounds.min; 
var maxY = plot2.axes.yaxis._dataBounds.max; 

(你可以得到其minX和maxX的同样使用x轴。 )

然后,您可以要求jqplot使用此边界来绘制精确范围:

plot2.axes.yaxis.min = minY; 
plot2.axes.yaxis.max = maxY; 

(同样为xaxis行事);

最后,重新绘制你的图:plot2.replot();

您最终的图形,根据您的数据值有一定的限度。

PS:你可以在numberTicks以及使用plot2.yaxis._numberTicks或plot2.yaxis.numberTicks工作(不知道哪一个是有效的)

见类似的帖子here