biểu đồ flot, sử dụng chú thích để bật/tắt loạt

Question

Tôi muốn có thể sử dụng chú thích của biểu đồ khối để bật/tắt chuỗi biểu đồ của tôi. Tôi tìm thấy các ví dụ trên trang web flot và đã sử dụng Turning series on/off và Labelformatter từ API để xây dựng những gì tôi có ngay bây giờ. Tôi có thể đặt các hộp kiểm bên cạnh các phần tử chú giải và thêm một sự kiện nhấp vào chúng và đám cháy của nó. Nhưng điều đó gọi hàm lô một lần nữa và đặt lại giá trị hộp kiểm của tôi. Tôi đã bao gồm các chức năng jquery đầy đủ, xin lỗi một chút dài của nó.

<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

Có một vài vấn đề với mã của bạn:

Dữ liệu bạn đang sử dụng là dưới dạng một mảng, trong khi một thể hiện trong bản demo là một đối tượng. Sự khác biệt là quan trọng ở đây bởi vì bạn đã sao chép mã của họ, nhưng không thay đổi mã để phù hợp với điều này. Các dòng được đề cập là:

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

bên trong hàm plotAccordingToChoices(). results[key] trong trường hợp của bạn sẽ không hoạt động vì key sẽ cần phải là một giá trị số, nhưng key đây là một chuỗi. Giải pháp là để thay thế này với một vòng lặp for mà tìm kiếm thông qua các mảng cho nhãn đúng:

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

Tiếp theo, vấn đề là bạn đang replotting cùng một dữ liệu hơn và hơn nữa, với dòng này:

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

results[] bao giờ thay đổi - bạn nên sử dụng data[] đây thay vì:

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

Sau đó, không giống như trong bản demo, bạn đã quyết định Setu p các hộp kiểm sử dụng hàm formatlabel trong tùy chọn legend khi vẽ đồ thị. Vấn đề với điều này là khi bạn thay thế đồ thị bằng dữ liệu mới không chứa tất cả các kết quả, các hộp kiểm cho các dòng không được hiển thị sẽ không hiển thị vì flot sẽ không vẽ các nhãn của các dòng không tồn tại.

Điều này có nghĩa là bạn sẽ phải làm như bản trình diễn - để tạo các hộp kiểm riêng biệt. Chúng tôi làm điều này bằng cách thêm các dòng sau vào $.each vòng lặp được sử dụng để sửa chữa các màu sắc mỗi dòng sử dụng:

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

này sẽ tạo ra một hộp kiểm - bộ nhãn cho mỗi bộ dữ liệu trong mảng results. Cuối cùng chúng ta di chuyển các chức năng cho ràng buộc plotAccordingToChoices cho mỗi hộp kiểm bên ngoài chức năng, do đó ràng buộc chỉ xảy ra một lần, để ngăn chặn nhiều ràng buộc và sự lộn xộn kết quả:

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

Chúng tôi cũng thay đổi nó để sử dụng các sự kiện change thay vì click vì change ở đây phù hợp hơn.

Và cuối cùng, như một phần thưởng, chúng ta lặp qua bảng huyền thoại và kéo các màu sắc từ đó để thêm vào danh sách các hộp kiểm sau:

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

Chúng ta cũng cần một chút CSS để làm việc này:

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

Xem mã làm việc cuối cùng sống ở đây: http://jsfiddle.net/yijiang/6FLsM/2/