如何選擇nvd3

Question

所有nvd3例子（我已經找到了）不同的屬性，而不是`key`是這樣的：

return [ 
{ 
    values: sin,  //values - represents the array of {x,y} data points 
    key: 'Sine Wave', //key - the name of the series. 
    color: '#ff7f0e' //color - optional: choose your own line color. 
}, ...] 

我想利用這將使用基於不同的按鍵功能圖表/繪圖區域的大小。

所以，如果我有一個大的繪圖區域，我有整個名字的空間Sine Wave和小地區我只是顯示sin。

是的，我可以通過該系列並更新key屬性，但將所有必要的數據放入對象並選擇渲染時間（應該使用哪個鍵）會更容易。

Answer 1

您可以使用chart.legend.key()

chart.legend.key(function(d){ 
    // Return the key you want for series d here based on screen realestate 
    // FYI: The default would return d.key 
}); 

所以它可能是這個樣子：

function setLegendKeys(d){ 
     var width = document.body.clientWidth; 
     var abbreviations = { 
     'Sine Wave': 'sin', 
     'Cosine Wave': 'cos' 
     }; 
     if (width < 500){ 
     return abbreviations[d.key]; 
     } 
     return d.key; 
    } 

    chart.legend.key(setLegendKeys) 

看到這個普拉克一個活生生的例子： http://plnkr.co/edit/lisKuZ5ivj25QhyjlQUW?p=preview