Question

所有nvd3示例（我发现）都是这样的：

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)

请参阅此Plunk以获取实时示例： http://plnkr.co/edit/lisKuZ5ivj25QhyjlQUW?p=preview

如何在nvd3中选择不同的属性而不是`key`

1 个答案: