4

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

4

3 回答 3

6

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

于 2010-11-06T01:18:52.263 回答
3

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

在这里，绘图是在一个名为 chart1 的 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 选项卡触发的 '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 对象，否则您的绘图会相互重叠并导致浏览器过载。

于 2011-03-13T08:19:34.093 回答
1

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

  1. 以另一种方式提供图形的维度（例如数据高度和数据宽度属性）和
  2. 显示图形时调用 replot()。

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

链接：

于 2015-07-05T23:29:49.803 回答