如何在NVD3图表中使用自定义图例

Question

我正在使用NVD3折线图。

默认图表呈现图例其是可点击。

我想用<ul>和<li>元素构建一个自定义图例;单击这些<li> s应该在图表上切换它们各自的系列。

$(function(){ 
    nv.addGraph(function() { 
     var dayChart = nv.models.lineChart() 
      .options({ 
       transitionDuration: 300, 
       useInteractiveGuideline: true, 
       interpolate: 'monotone' 
      }); 

     dayChart.xAxis 
      .axisLabel('Time') 
      .tickValues([0, 1, 2, 3, 4]) 
      .tickFormat(function(d){ 
       return ["", "0-6", "6-12", "12-18", "18-24"][d] 
      }); 

     dayChart.yAxis 
      .axisLabel('Engagement') 
      .tickFormat(function(d) { 
       if (d == null) { 
        return 'N/A'; 
       } 
       return d3.format(',d')(d); 
      }) 
     ; 

     var data = [ 
       {"values": [ 
        { "x": 0 ,"y": 3 }, { "x": 1 ,"y": 5 }, { "x": 2 ,"y": 2 }, { "x": 3 ,"y": 4 }, { "x": 4 ,"y": 2 }], "key": "Desktop","color":"#4b758d" 
       } 
       , 
       {"values": [ 
        { "x": 0 ,"y": 1 }, { "x": 1 ,"y": 3 }, { "x": 2 ,"y": 4 }, { "x": 3 ,"y": 3 }], "key": "Mobile","color":"#99c925"    }, 
       {"values": [ 
        { "x": 0 ,"y": 2 },{"x": 1 ,"y": 4 }, { "x": 2 ,"y": 3 }, { "x": 3 ,"y": 5 }],"key": "Tablet","color":"#f23b71"    } 
      ]; 

     d3.select('#line-chart').append('svg') 
      .datum(data) 
      .call(dayChart); 

     nv.utils.windowResize(dayChart.update); 

     return dayChart; 
    }); 
}); 

完全调节器demo。

Answer 1

禁用图例chart.showLedgend(false)。有关entire code looks here的更多详细信息。

假设您有一个图表的全局实例，您需要更改图表的状态。

$(document).on('click', '#myButton', function(){ 
    chart.dispatch.changeState('key'); 
    chart.update(); 
}); 

Answer 2

这个工作对我来说：

$(document).on('click', '#button', 
    function(){ 
     var state = chart.state; 
     state.disabled[idOfItemInLegend] = !state.disabled[idOfItemInLegend]; 
     chart.dispatch.changeState(state); 
     chart.update(); 
    } 
);