当鼠标悬停在线上时,flotr显示数据系列名称

时间:2012-05-31 17:44:52

标签: javascript flot flotr

我正在使用flotr来绘制90个数据集。平均而言,90组数据中只有两组实际上会生成一条潦草线。另外88个左右的y值会很低,以至于它们几乎不会在x轴上方达到峰值。这是一个例子......

enter image description here

我的问题是我不知道这两行是什么数据集。我可以创造一个传奇,但这个传说将是巨大的,因为有大约90个数据集。所以我想知道当鼠标悬停在该数据集的图形数据上时,flotr是否具有标记这些数据集的功能。这样的功能存在吗?感谢。

1 个答案:

答案 0 :(得分:9)

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

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