3

具体的には、flot プロット コードを使用しています。私の意図は、プロット上の各トラックの両方のチャネルを含むオーディオ パワー スペクトル データをプロットすることです。したがって、特定のコンサートで 2 ～ 40 のラインを使用できると予想できます。

プロット上で数値と色を静的に保ちながら、各行のオンとオフを切り替える方法があればいいのにと思います。私はさまざまな方法を試しましたが、目的の場所にほぼ到達する方法が 2 つあります。

1 つ目は、以下に示すhttp://people.iola.dk/olau/flot/examples/turning-series.htmlのコードに基づいています。

var track = 0;
// hard-code color indices to prevent them from shifting as
// countries are turned on/off
var i = 0;
$.each(datasets, function(key, val) {
    val.color = i;
    ++i;
});

// insert checkboxes 
var choiceContainer = $("#choices<?php echo $i ?>");
 choiceContainer.append('<table><tr>');
$.each(datasets, function(key, val) {
        track = track + 1;
        if (track == 1){
            choiceContainer.append('<td width=\"100\">Left Channel</td>');
        } else if(track == <?php echo $tracks ?>){
            choiceContainer.append('</tr><tr>');
            choiceContainer.append('<td>Right Channel</td>');
        }
        choiceContainer.append('<td width=\"35\"><input type="checkbox" name="' + key +
                           '" checked="checked" id="id' + key + '">' +
                           '<label for="id' + key + '">'
                            + val.label + '</label></td>');


});
 choiceContainer.append('</tr></table>');
choiceContainer.find("input").click(plotAccordingToChoices);


function plotAccordingToChoices() {
    var data = [];

    choiceContainer.find("input:checked").each(function () {
        var key = $(this).attr("name");
        if (key && datasets[key])
            data.push(datasets[key]);
    });

  var options = {
      yaxis: { min: 0 },
      xaxis: { tickDecimals: 0 },
      xaxes: [{
            axisLabel: 'Frequency (Hz)',
        }],
        yaxes: [{
        position: 'left',
        axisLabel: 'Power (dB)',
        }],
        series: {
            lines: {
                lineWidth: 2
            }
        },
        legend: {
            noColumns:7,
            container: $("#labeler<?php echo $i ?>"),
            labelFormatter: function(label, series){
              return '<a href="#" onClick="togglePlot('+series.idx+'); return false;">'+label+'</a>';
        }
            }


     };

     if (data.length > 0){
         $.plot($("#placeholder<?php echo $i ?>"), data, options);
     }
}
plotAccordingToChoices();

checkboxesこれは、横に色見本が表示されない ことを除いて、私が達成しようとしていることにうまく機能します...

ここの例: http://jsfiddle.net/mpazaryna/Zvqqn/は、色見本を使用してオンオフ機能を非常に簡単に作成するコードを示しています。しかし、どのチャンネルとどのトラックが選択されているかについて首尾一貫した方法で凡例をフォーマットすることには向いていません（私見）。

したがって、私の目標は、上記の既存のコードに色見本を追加する方法を見つけることです。これは現在、ページのレイアウトに役立つと思われる方法で構成されているためです。

4

1 に答える 1

1

わかりました..少し時間がかかりましたが、以下は私が落ち着いたコードです。これにより、flot プロットの下のテーブルに見本が追加されます。プロットの右側にはまだ凡例があり、チェックボックスでセットのオンとオフを切り替えると、凡例が表示されたり消えたりします。テーブル内のスウォッチは保持されます。多分これは誰かを助けるでしょう！

var options = {
legend: {
    show: true
},
series: {
    points: {
        show: false
    },
    lines: {
        show: true
    }
},
grid: {
    hoverable: true
},
xaxis: {

},
yaxis: {


}
};

 var i = 0;
 var track = 0;
choiceContainer = $("#labeler<?php echo $i ?>");
 var table = $('<table border=1/>');    
var row = $('<tr/>');
var cell = $('<td width=\"100\"/>');
var temp = $(table);

$.each(results, function(key, val) {
 track = track + 1;
val.color = i;
++i;
l = val.label; 


 if (track == 1){
    temp.append(row);
    row.append(cell);
    cell.append('Left Channel');
 } else if(track == <?php echo $tracks ?>){
    row = $('<tr/>');
    temp.append(row);
    cell = $('<td width=\"100\">');
    row.append(cell);
    cell.append('Right Channel');
 }

    cell = $('<td width=\"75\"/>');
    row.append(cell);
    var bar = $('<div style=\"width:18px\"><bar />');
    cell.append(bar);
   var inp = $('<input name="' + l + '" id="' + l + '" type="checkbox" checked="checked">');
    cell.append(inp);
    var bits = $('<label>', {
            text: l,
            'for': l
            });
    cell.append(bits); 

choiceContainer.append(temp);

});

function plotAccordingToChoices() {
var data = [];

choiceContainer.find("input:checked").each(function() {
    var key = this.name;

    for (var i = 0; i < results.length; i++) {
        if (results[i].label === key) {
            data.push(results[i]);
            return true;
        }
    }
});

$.plot($("#placeholder<?php echo $i ?>"), data, options);
}

var previousPoint = null;

$("#placeholder").bind("plothover", function(event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));

if (item) {
    if (previousPoint != item.datapoint) {
        previousPoint = item.datapoint;

        $("#tooltip").remove();
        var x = item.datapoint[0].toFixed(2),
            y = item.datapoint[1].toFixed(2);

        showTooltip(item.pageX, item.pageY, item.series.label + " $" + y);
    }
} else {
    $("#tooltip").remove();
    previousPoint = null;
}
});

function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
    position: 'absolute',
    display: 'none',
    top: y + 5,
    left: x + 15,
    border: '1px solid #fdd',
    padding: '2px',
    backgroundColor: '#fee',
    opacity: 0.80
}).appendTo("body").fadeIn(200);
}

plotAccordingToChoices();
choiceContainer.find("input").change(plotAccordingToChoices);

$('.legendColorBox > div').each(function(i){
$(this).clone().prependTo(choiceContainer.find("bar").eq(i));
});
于 2013-09-30T16:49:23.030 に答える