如何在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(); 
    } 
);