当鼠标悬停在线上时,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'
            }
        }
    );