Question

我正在寻找一种通过触发外部按钮点击来激活jquery flot折线图上的/某些数据点的方法。我怎么能这样做 - 如何在不使用鼠标的情况下获得数据点的句柄 - 我将如何激活它并激活工具提示？

感谢任何专家建议！

Answer 1

在我之前的评论中，我并不知道FLOT中存在的API挂钩和方法。旧文档是一个非常原始的txt文件。下面是一个使用highlight/unhighlight的简单示例，以及使用pointOffset()方法计算数据点在图表中的像素位置，以便定位工具提示。

<button data-index="4">Highlight 5th point</button>
<button data-index="9">Highlight 10th point</button>
<button data-index="19">Highlight 20th point</button>

JS：

var plotData =/* data array*/

$('button').click(function(){
    var idx=$(this).data('index');
    plot.unhighlight()
    plot.highlight(dataSeriesIndex, idx);
    var dataPoint=plotData[idx];
    var position=plot.pointOffset({ x: dataPoint[0], y:  dataPoint[1] })
    var tipHTML='Data:<br> X='+dataPoint[0] +'<br> Y=' +dataPoint[1];
    $('#tooltip').css({left: position.left+10, top: position.top-10}).show().html(tipHTML)     
})

DEMO：http://jsfiddle.net/et87Y/73/

Answer 2

Flot在绘图对象上提供高亮和非高亮方法，如文档的Plot Methods部分所述。

传入系列的索引和系列中点的索引，并突出显示该点。

与Flot捆绑在一起的examples文件夹中的'interacting'示例有一个此功能的现场演示。

任何方式选择一个没有悬停/点击（外部按钮）的flot chart datpoint

2 个答案: