Javascript 手风琴中的jqPlot图

我想在jQuery手风琴中绘制一个图形，但它会导致图形被切碎并显示比例。有人对此进行了修复吗？

正如jqPlot的页面上所解释的，jqPlot在绘制图表时需要知道图表的大小，如果图表被手风琴或标签隐藏，它就无法做到这一点。解决方案是以另一种方式指定图表的尺寸，或者在手风琴展开时调用

replot

。有关完整的详细信息和示例代码，请参见。

手风琴中的所有内容在展开之前都是隐藏的，这意味着它是无量纲的。您需要等待显示手风琴图表所包含的DOM部分，然后绘制图形。如果查看jqPlot最新版本中包含的ui.html示例，您将看到：

在这里，绘图是在名为chart1的div处创建的，该div位于隐藏的jQuery UI选项卡中：

plot1 = $.jqplot('chart1', [l1, l2, l3],  {
  title: "I was hidden",
  lengend:{show:true},
  series:[{},{yaxis:'y2axis'}, {yaxis:'y3axis'}],
  cursor:{show:true, zoom:true},
  axesDefaults:{useSeriesColor:true}
});

然后使用jQueryUI选项卡触发的“tabsshow”事件注册事件处理程序。在您的情况下，您需要为jQuery UI Accordion小部件在完成更改Accordion的状态后触发的“accordionchange”事件注册一个处理程序。下面是如何绑定到上述代码示例的选项卡的“tabsshow”事件：

$('#tabs').bind('tabsshow', function(event, ui) {
  if (ui.index == 1 && plot1._drawCount == 0) {
    plot1.replot();
  }
  else if (ui.index == 2 && plot2._drawCount == 0) {
    plot2.replot();
  }
});

在同一个ui.html文件中还有一个使用手风琴的工作示例。您可以在bitbucket的最新版本中找到以下示例：

---

另外，请确保不要在同一个div上实例化多个jqPlot对象，否则会使绘图彼此重叠，并使浏览器过载。

隐藏元素（如选项卡或手风琴元素）没有大小，因此您可能需要使用jqPlot文档中提到的技术，即：

以另一种方式提供图形的尺寸（例如数据高度和数据宽度属性），以及

显示图形时调用replot（）

但是，文档中的示例使用了2。事件名称可能与您的jquery ui版本不符。例如，如果使用Bootstrap 3，则正确的事件具有不同的名称：“show.bs.tab”

链接：

---

代码？你试了什么。什么失败了？如何/为什么？出于某种原因，

ui.index=#

对我不起作用。在jquery站点上，他们使用

ui.index==#

。同样，这对我来说不起作用，所以我使用了

ui.newHeader.text（）=“JQPlot”

（我使用的是jquery 1.9.1、jui 1.10.3和JQPlot 1.0.8）希望这些信息能帮助一些只包含链接的答案。请在此总结内容（不要复制/粘贴），以便答案能够独立存在。如果你不这样做，你的答案就有被删除的风险，特别是如果链接曾经消失。