將複選框添加到jqplot折線圖的圖例

Question

我一直在使用jqplot在當前正在處理的網站上繪製折線圖。我喜歡它是如何通過單擊圖例中的系列名稱來選擇切換線條系列的選項。但是，我的問題是，用戶不知道他們可以點擊系列名稱來切換系列，並不斷詢問如何去做。

如何添加系列名稱旁邊的複選框以及可點擊的系列名稱，以便用戶知道可以單擊以顯示/隱藏圖表中的一行？我一直在尋找一段時間，但一直未能找到解決方案。

感謝您提供任何幫助。

Answer 1

我做了一個函數，添加複選框到圖例。然後它給複選框顯示/隱藏每個系列趨勢線的功能。然後它將說明添加到圖例的底部。如果其他人正在尋找如何做到這一點，那就是：

function addTrendLineButtons() { 
    $legend = $("table.jqplot-table-legend", $chartCanvas); 
    $legendRows = $("tbody tr.jqplot-table-legend", $legend); 

    $legendRows.each(function(idx) { 
     $checkbox = $('<input />', { 
      type: 'checkbox', 
      checked: $jqPlot.options.series[idx].trendline.show 
     }); 
     $checkbox.appendTo($(this)); 
     $checkbox.change(function() { 
      $jqPlot.options.series[idx].trendline.show = $(this).is(":checked"); 
      $jqPlot.replot($jqPlot.options); 
      addTrendLineButtons(); 
     }); 
    }); 

    $instructions = $('<tfoot><tr><td colspan=3>Check box to<br />show trendline</td></tr></tfoot>'); 
    $instructions.css('text-align', 'right'); 
    $instructions.appendTo($legend); 
} 

注意：您必須已經明確創建的對象趨勢線每個系列，不僅在seriesDefaults對象。