重绘 jqPlot答案

【问题标题】：Redrawing jqPlot重绘 jqPlot
【发布时间】：2012-03-15 15:32:09
【问题描述】：

我正在使用 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。

有什么想法吗？

谢谢，

克雷格

【问题讨论】：

在此之前已回答：stackoverflow.com/q/7212922

标签： javascript jquery jqplot

【解决方案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 ，它也会重新调整轴的比例（您确实会丢失您可能设置的任何最小值/最大值）。有关重新绘制的更多信息，请参阅此页面：http://www.jqplot.com/docs/files/jqplot-core-js.html#jqPlot.replot。

【讨论】：

【解决方案2】：

我用过

    var timer;
    $(window).resize(function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            plot.replot({});
        }, 100);
    });

所以它不会继续为每个像素重新绘制，而是在调整大小结束时。

【讨论】：

【解决方案3】：

jqplot 图表通常占据图表 div ID 所持有的全部区域。因此，尝试找到一种方法来重新调整 div 的大小并重绘图表，在绘图对象上调用重绘。

【讨论】：