7

flotr を使用して、90 個のデータセットをグラフ化しています。平均して、90 セットのデータのうち 2 セットだけが実際にグラフ化可能な線を生成します。残りの 88 個ほどの y 値は非常に低いため、x 軸を超えるピークはほとんどありません。ここに例があります...

ここに画像の説明を入力

私の問題は、これらの 2 つの行がどのデータ セットであるかがわからないことです。凡例を作成することもできますが、約 90 のデータ セットがあるため、その凡例は巨大になります。そのため、マウスがそのデータセットのグラフ化されたデータの上に置かれたときに、flotr にこれらのデータセットにラベルを付ける機能があるかどうか疑問に思っていました。そのような機能は存在しますか？ありがとう。

4

1 に答える 1

10

さて、私は私の答えを見つけました。私はこの例を見ました...

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'
            }
        }
    );
于 2012-06-01T18:45:09.810 に答える