javascript - 当鼠标悬停在线条上时，flotr 显示数据系列名称

Question

我正在使用 Flotr 绘制 90 个数据集。平均而言，90 组数据中只有两组实际上会产生可绘制的线。其他 88 个左右的 y 值将非常低，以至于它们几乎不会在 x 轴上方达到峰值。这是一个例子......

我的问题是我不知道这两行是什么数据集。我可以制作一个图例，但这个图例会很大，因为大约有 90 个数据集。所以我想知道当鼠标悬停在该数据集的图形数据上时，flotr 是否具有标记这些数据集的功能。有这样的功能吗？谢谢。

Answer 1

好的，我找到了我的答案。我看到了这个例子...

http://phenxdesign.net/projects/flotr/examples/prototype/mouse-tracking.html

这个使用跟踪支持，但它只显示 x 和 y 值。我看到了这条线......

trackFormatter: function(obj){ return 'x = ' + obj.x +', y = ' + obj.y; }

并将其更改为...

trackFormatter: function(obj){ return 'x = ' + obj.x +', y = ' + obj.y  +', Data Series = ' + obj.series.label; }

然后我为每个数据集指定了一个数据标签，并将它们传递给关联数组中的 Flotr.draw。我通过改变这个来做到这一点......

[dataset1, dataset2]

对这个...

[{data:dataset1,label:'label_for_dataset1'}, {data:dataset2,label:'label_for_dataset2'}]

以下是我所做更改的示例。现在鼠标悬停显示 x 和 y 值以及您输入的任何数据标签。

前：

var dataset1 = [[100, 4.09453e-29], [99, 1.41672e-28],...... ];
var dataset2 = [[100, 9.48582e-19], [99, 1.88215e-18],...... ];

var f = Flotr.draw(
        $('container'), 
        [dataset1, dataset2],
        {
            mouse:{
                track: true,
                lineColor: 'purple',
                relative: true,
                position: 'ne',
                sensibility: 1, // => The smaller this value, the more precise you've to point
                trackDecimals: 2,
                trackFormatter: function(obj){ return 'x = ' + obj.x +', y = ' + obj.y; }
            },
            crosshair:{
                mode: 'xy'
            }
        }
    );

后：

var dataset1 = [[100, 4.09453e-29], [99, 1.41672e-28],...... ];
var dataset2 = [[100, 9.48582e-19], [99, 1.88215e-18],...... ];

var f = Flotr.draw(
        $('container'), 
        [{data:dataset1,label:'enter_label_for_dataset1_here'}, {data:dataset2,label:'enter_label_for_dataset2_here'}],
        {
            mouse:{
                track: true,
                lineColor: 'purple',
                relative: true,
                position: 'ne',
                sensibility: 1, // => The smaller this value, the more precise you've to point
                trackDecimals: 2,
                trackFormatter: function(obj){ return 'x = ' + obj.x +', y = ' + obj.y  +', Data Series = ' + obj.series.label; }
            },
            crosshair:{
                mode: 'xy'
            }
        }
    );