【问题标题】:Does jquery.flot.dashes.js support plothover and plotclick?jquery.flot.dashes.js 是否支持 plothover 和 plotclick?
【发布时间】:2014-07-06 05:47:52
【问题描述】:

通过使用 plothover 事件,我使用正常的图形选项(不使用破折号)设置了一个可行的工具提示系统,但是当我切换到“黑白”模式(使用破折号)时,绘图无法悬停。使用破折号时,有什么方法可以使图表保持可悬停和可点击?或者有一种方法可以在没有破折号的情况下以黑白方式制作出体面的情节?

示例系列:{data: data, dashes:{show: true, dashLength: 2}, color: "black", label: "Series 1"}

我目前的绘图选项:

options = {
      yaxis: {max: maxValue, min: minValue},
      grid: {hoverable: true, clickable: true},
      legend: {show: false},
      xaxis: {tickFormatter: null}
  };

我使用 plothover 事件作为工具提示,如下所示:

$(this).bind("plotclick", function (event, pos, item){ //tooltip code here }

【问题讨论】:

  • 定义“看起来不错的黑白情节”。您可以按系列或全局更改 flot 使用的颜色。
  • 通过“黑白相得益彰的情节”,我的意思是有没有一种方法可以制作一个黑白情节,您可以在不使用 jquery.flot.dashes 的情况下将多个系列彼此区分开来.js?我将发布彩色模式和黑白(虚线)模式的图片。
  • 这是一个fiddle,使用不同的灰色阴影。请注意,我确实在全局范围内指定了颜色。如果数据系列多于颜色,flot 将通过改变定义的颜色来生成额外的颜色。

标签: javascript jquery hover flot


【解决方案1】:

参见this issue 填充到jQuery.flot.dashes 插件。

关于悬停问题,有一个名为“findNearbyItem”的函数 在 jquery.flot.js 中,仅当绘图显示时才执行搜索 线、点或条。如果您只显示“破折号”,那么它 不会执行搜索。

两种选择:
- 修改 jquery.flot.js 文件中的以下行:if (s.lines.show || s.points.show) 类似于 if (s.lines.show || s.points.show || s.dashes.show)
- 在您显示破折号的系列中显示半径为 0 的点:(来自评论 #41 中的示例)
{ label: "sin(x)", data: d1, dashes: { show: true, steps:true }, points: {show: true, radius:0 }}

我同意发帖者的观点,即第二种解决方案是一个更好的主意。我也试过in this fiddle and is works well

【讨论】:

  • 谢谢!我尝试了您在小提琴中所做的事情,并且悬停和单击都有效;但是 0 的半径给我的项目带来了一个新问题(突出点)。如果我无法弄清楚,我将创建一个新问题,因为这是另一回事,如果您想看看,我会在此处发布一个链接。
  • 我能够对 jquery.flot.js 源代码进行调整,以使用 drawPointHighlight 方法解释 0 半径。谢谢你的一切!
  • 我能够通过添加 lines:{show: true, lineWidth: 0} 并更改点以显示 false 来保持悬停效果。我会在windows firefox中测试,结果也会告诉你。
猜你喜欢
  • 1970-01-01
  • 2012-07-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多