flot graph、凡例を使って系列をオン/オフにする

Question

フロートグラフの凡例を使用してグラフのシリーズをオン/オフできるようにしたい。私はflotサイトのサンプルを見つけ、APIのTurning series on/offとLabelformatterを使用して、私が現在持っているものを構築しました。私は凡例要素の隣にチェックボックスを置いて、それらにクリックイベントを追加して、その火災を追加することができます。しかし、それは再びプロット関数を呼び出し、チェックボックスの値をリセットします。私は完全なjquery関数を含んでいます、ごめんなさい、少し長いです。

<script id="source"> 
var jsonPath = "JsonPriceHistory/" + getParameterByName("CardId") 



$(function() { 
    $.getJSON(jsonPath, function (results) { 

     results = [{ "label": "A", "data": [[1290115114240, 0.7000], [1289396258877, 0.7000], [1289394738247, 0.7000], [1288482602563, 0.7000], [1288479321830, 0.7000], [1288464257267, 0.7000], [1288463414413, 0.7000], [1268440264933, 1.0000], [1268434766653, 1.0000], [1268059707567, 1.0000], [1265934534340, 1.0000]] }, { "label": "B", "data": [[1290115102033, 6.0000], [1289395956947, 6.0000], [1289394743117, 6.0000], [1288482613967, 6.0000], [1288479332767, 6.0000], [1288464270420, 6.0000], [1288463427313, 6.0000], [1268440276413, 6.0000], [1268434778203, 6.0000], [1268059732683, 6.0000], [1265934545390, 6.0000]] }, { "label": "C", "data": [[1290115034640, 0.3000], [1289397347113, 0.3000], [1289396593083, 0.3000], [1289395047560, 0.3000], [1288484556080, 0.3000], [1288482794357, 0.3000], [1288465863503, 0.3000], [1288465248087, 0.3000], [1288464674300, 0.3000], [1268470601960, 0.6000], [1268469438957, 0.6000], [1268468281610, 0.6000], [1268440646800, 0.6000], [1265984810360, 0.8000], [1265955747730, 0.8000]] }, { "label": "C", "data": [[1290115031727, 0.1200], [1289397678960, 0.1200], [1289397337040, 0.1200], [1289396577510, 0.1200], [1289395024607, 0.1200], [1288484550417, 0.1200], [1288482780457, 0.1200], [1288465846327, 0.1200], [1288465231287, 0.1200], [1288464658213, 0.1200], [1268470586860, 0.2000], [1268469423697, 0.2000], [1268468266277, 0.2000], [1268440631390, 0.2000], [1265984774793, 0.2000], [1265955732580, 0.2000]] }, { "label": "D", "data": [[1290114958773, 0.0500], [1289397467207, 0.0500], [1289396747243, 0.0500], [1289395166640, 0.0500]] }, { "label": "E", "data": [[1290114933540, 0.6500], [1289397579447, 0.6500], [1289397242333, 0.6500], [1289396486657, 0.6500], [1289395003947, 0.6500], [1288484568590, 0.6500], [1288482784747, 0.6500], [1288465893750, 0.6500], [1288465278320, 0.6500], [1288464705170, 0.6500], [1268470629373, 0.6500], [1268469467810, 0.6500], [1268468309513, 0.6500], [1268440674610, 0.6500], [1265984889857, 0.6500], [1265955775453, 0.6500]] }, { "label": "F", "data": [[1290114885570, 0.1100], [1289396731507, 0.1100], [1289395170397, 0.1100]]}]; 

     var options = { 
      legend: { 
       show: true, 
       container: $("#overviewLegend"), 
       labelFormatter: function (label, series) { 
        var cb = '<input type="checkbox" name="' + label + '" checked="checked" id="id' + label + '"> ' + label; 
        return cb; 
       } 
      }, 
      series: { 
       points: { show: true }, 
       lines: { show: true } 
      }, 
      grid: { hoverable: true }, 
      xaxis: { 
       mode: "time", 
       minTickSize: [1, "day"], 
       max: new Date().getTime() 
      }, 
      yaxis: { 
       mode: "money", 
       min: 0, 
       tickDecimals: 2, 
       tickFormatter: function (v, axis) { return "$" + v.toFixed(axis.tickDecimals) } 

      } 
     }; 

     var i = 0; 
     $.each(results, function (key, val) { 
      val.color = i; 
      ++i; 
     }); 

     var choiceContainer = $("#overviewLegend"); 

     function plotAccordingToChoices() { 
      var data = []; 
      alert('hi'); 

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

      $.plot($("#placeholder"), results, options); 
      choiceContainer.find("input").click(plotAccordingToChoices); 
     } 



     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', 
       'background-color': '#fee', 
       opacity: 0.80 
      }).appendTo("body").fadeIn(200); 
     } 

     plotAccordingToChoices(); 
    }) 



}); 

Answer 1

あなたのコードに問題がいくつかあります：

デモで提示された1つのオブジェクトである間、あなたが使用しているデータは、アレイの形態です。ここで重要なのは、コードをコピーしたためですが、これに対応するコードを変更していないためです。問題の行は次のとおりです。

if (key && results[key]) 
    data.push(results[key]); 

plotAccordingToChoices()の機能です。 keyは数値である必要がありますが、keyは文字列であるため、あなたの場合はresults[key]が機能しません。解決策は、正しいラベルの配列を検索forループでこれを置き換えることです：

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

次に、問題は、この行で、何度も何度も同じデータを再プロットされていることである。

$.plot($("#placeholder"), results, options); 

results[]変わることはありません - あなたの代わりに、ここでdata[]を使用する必要があります。

$.plot($("#placeholder"), data, options); 

を次に、デモとは異なり、あなたはsetuに決めましたグラフをプロットするときにlegendオプションのformatlabel機能を使用してチェックボックスをオンにします。この問題は、すべての結果が含まれていない新しいデータをグラフに置き換えた場合、flotが存在しない行のラベルを描画しないため、表示されていない行のチェックボックスが表示されなくなります。

これは、デモで行う必要があることを意味します。つまり、チェックボックスを別々に作成することです。 - results配列内のデータの各セットのためのラベルセット

l = val.label; 
var li = $('<li />').appendTo(choiceContainer); 

$('<input name="' + l + '" id="' + l + '" type="checkbox" checked="checked" />').appendTo(li); 
$('<label>', { 
    text: l, 
    'for': l 
}).appendTo(li); 

これは、チェックボックスを作成します。私たちは、それぞれの行が使用する色を固定するために使用される$.eachループに次の行を追加することでこれを行います。

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

我々はまた、代わりのchangeイベントを使用するように変更：結合のみが複数のバインディングとその結果の混乱を防ぐために、一度発生するように最後に、我々は、関数の外の各チェックボックスにplotAccordingToChoicesを結合するための機能を移動しますここではchangeが適切です。

そして最後に、ボーナスとして、私たちの伝説テーブルをループして、そこから色を引くには、チェックボックスのリストに追加する：我々はまた、少しCSSを必要とする

$('.legendColorBox > div').each(function(i){ 
    $(this).clone().prependTo(choiceContainer.find("li").eq(i)); 
}); 

はこれが動作するために：

#overviewLegend li > div { 
    display: inline-block; 
    margin-right: 4px; 
} 

最終作業コードを参照してくださいここに住ん：あなたはので、私はDを働かせることができるあなたはjsFiddleでデモをリンクすることができhttp://jsfiddle.net/yijiang/6FLsM/2/