重绘jqPlot

Question

我正在使用jqPlot,并想知道当有人更改窗口大小时是否有一种方法可以调整大小/重绘它.我知道有一个重绘功能,但我不确定如何真正调用它...有人可以给我一些关于如何做这个的指示？

这是我的代码:

$.jqplot('chart1', [line1], {
              title:'Users Per Day',
              axes:{
                xaxis:{
                  renderer:$.jqplot.DateAxisRenderer,
                  tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
               //   tickInterval:'1 week',
                  tickOptions:{
                    formatString:'%b %#d, %y',
                    angle:-30
                  } 
                },
                yaxis:{
                  tickOptions:{
                    formatString:'%.1f'
                    }
                }
              },
              highlighter: {
                show: true,
                sizeAdjust: 7.5
              },
              cursor: {
                  show: false
                  /*show: true,
                  zoom: true,
                  showTooltip: false */
              }
          });

'line1'是在此代码之前填充的数组,chart1是绘制图表的div.

有任何想法吗？

谢谢,

克雷格

Answer 1

有关可调整大小的图表的此页面非常有用:http://www.jqplot.com/deploy/dist/examples/resizablePlot.html

这就是我解决你正在处理的项目的特定问题的方法(我只使用你的代码作为例子):

首先,将您的绘图分配给变量:

plot = $.jqplot('chart1', [line1], {
          title:'Users Per Day',
          axes:{
            xaxis:{
              renderer:$.jqplot.DateAxisRenderer,
              tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
           //   tickInterval:'1 week',
              tickOptions:{
                formatString:'%b %#d, %y',
                angle:-30
              } 
            },
            yaxis:{
              tickOptions:{
                formatString:'%.1f'
                }
            }
          },
          highlighter: {
            show: true,
            sizeAdjust: 7.5
          },
          cursor: {
              show: false
              /*show: true,
              zoom: true,
              showTooltip: false */
          }
      });

然后在您的页面上添加此功能:

$(window).resize(function() {
        plot.replot( {resetAxes: true } );
    });

使用resetAxes,它也会重新缩放轴(你可能会失去你设置的任何最小值/最大值).有关replot的更多信息,请参阅此页面:http://www.jqplot.com/docs/files/jqplot-core-js.html#jqPlot.replot .