logo标签列表

重绘 jqPlot

javascriptjqueryjqplot
4

我正在使用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。
有什么想法吗？
谢谢，
Craig
1
之前已经在这里回答过了：https://dev59.com/-FrUa4cB1Zd3GeqPmLDK/ - aknosis
3个回答
8
这个可调整大小的图表页面很有帮助：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。

2

我使用了

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

因此，它不会为每个像素重新绘制，而是在调整大小结束时进行绘制。

0
通常 jqplot 图表占据其所在的图表 div ID 的全部区域。因此尝试找到一种重新调整 div 大小并在 plot 对象上调用 redraw 以重新绘制图表的方法。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接