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'
            }
        }
    );