手风琴中的jqPlot图表

Question

我想在jQuery手风琴中绘制一个图表，但这会导致图表被截断并显示比例尺。有人有解决方法吗？

- teddyboy

---

代码？你尝试过什么？哪里出了问题？怎么/为什么会出错？ - jitter

Answer 1

如在jqPlot的Tab和Accordion UI Widgets页面上所解释的那样，当绘制图表时，jqPlot需要知道图表的大小，如果图表被手风琴或选项卡隐藏，则无法做到这一点。 解决方案是以另一种方式指定图表的尺寸，或在展开手风琴时调用replot。 有关完整详细信息和示例代码，请参见Tab和Accordion UI Widgets。

- Josh Kelley

Answer 2

手风琴中的所有内容在展开之前都是隐藏的，这意味着它是无尺寸的。你需要等待包含手风琴图表的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}
});

然后，一个事件处理程序被注册到由jQuery UI Tab触发的'tabsshow'事件。在你的情况下，你需要为jQuery UI Accordion小部件触发的'accordionchange'事件注册一个处理程序，在更改手风琴状态完成后。以下是如何绑定到上面代码示例的Tab的'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的最新发布中找到示例链接：jqplot.1.0.0a_r701

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

- stantonk

---

由于某些原因， ui.index == # 对我无效。 在jquery网站上，他们使用 ui.index === #。同样，这对我也没有用，所以我使用了 ui.newHeader.text() == "JQPlot" （我正在使用jquery 1.9.1、jui 1.10.3和jqplot 1.0.8）。希望这些信息能帮助到某些人。 - Chopo87

Answer 3

隐藏元素，比如标签页或手风琴元素没有大小，所以你可能想使用jqplot文档中提到的一种技术，即：

1. 以另一种方式提供图形的尺寸（例如data-height和data-width属性）并且
2. 在显示图形时调用replot()。

然而，文档中的示例在第二步中使用了一个事件名称，这可能与您使用的jquery-ui版本不正确。例如，如果您使用Bootstrap 3，则适当的事件名称为“shown.bs.tab”。

链接：

• http://www.jqplot.com/deploy/dist/examples/hiddenPlotsInTabs.html
• http://getbootstrap.com/javascript/#tabs-events

- tomasz

---

仅包含链接的答案被认为是不良做法。请在此处概述内容（不要复制/粘贴），以便答案可以独自站立。如果您不这样做，您的答案可能会被删除，特别是如果链接失效。 - Martijn Pieters