jq绘制手风琴图

  • Z时代
  • 2024-01-10
  • 分类：问答

我想绘制一个jQuery手风琴内的图形，但它会导致图形斩波，并显示比例。任何人都得到了解决这个问题？jq绘制手风琴图

回答：

由于jqPlot的Tab and Accordion UI Widgets页的说明，jqPlot需要知道当它绘制图表的大小，它可以这样做，如果该图由手风琴或标签隐藏。解决方法是以另一种方式指定图表的尺寸，或者在手风琴展开时调用replot。有关完整的详细信息和示例代码，请参阅Tab and Accordion UI Widgets。

回答：

手风琴中的一切都隐藏起来，直到它被展开，这意味着它是无量纲的。您需要等到手风琴图表所在的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 Tab触发的'tabsshow'事件。就你而言，在完成改变手风琴的状态之后，你会想为jQuery UI 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的最新版本中找到这个例子：jqplot.1.0.0a_r701

另外，请确保你没有在同一个div上实例化多个jqPlot对象，或者你的图将坐在另一个之上，浏览器。

回答：

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

  1. 提供在可替换的方式的曲线图的尺寸（例如。数据高度和数据宽度属性）AND

  2. 当图形显示时调用replot（）。

然而，文档中的示例使用2.可以是不正确使用您的jQuery UI的版本事件名称。例如，如果使用Bootstrap 3，则适当的事件具有不同的名称：“shown.bs.tab”。

链接：

  • http://www.jqplot.com/deploy/dist/examples/hiddenPlotsInTabs.html

  • http://getbootstrap.com/javascript/#tabs-events

以上是 jq绘制手风琴图 的全部内容， 来源链接： utcz.com/qa/257752.html

回到顶部