Question

如果可能的话，我需要在Angular NVD3折线图中的工具提示系列中添加更多属性，而无需修改NVD3源代码。我知道有类似的帖子，但没有一个涵盖这种情况。

这是我在选项中的工具提示部分：

interactiveLayer: {
  tooltip: {
    contentGenerator: function (d) {
        
        // output is key, value, color, which is the default for tooltips 
        console.log(JSON.stringify(d.series[0]));
        //{"key":"Name","value":1000,"color":"rgba(255,140,0, 1)"}

        // and I need more attributes to be added
        // into data points, such as label, count, location (see data below)
        //{"key":"Name","value":1000,"color":"rgba(255,140,0, 1), "label" : "some label", "count" : 23, "location" : "Paris"}
    }
  }
}

这是我的数据：

$scope.data =
[
{
  values: FirstGraphPointsArray, 
  key: 'Name',
  color: 'rgba(255,140,0, 1)'
},
{
   values: SecondGraphPointsArray
   key: 'City',
   color: 'rgba(255,140,0, 1)'
}
]

最后，数据中的数组结构：

FirstGraphPointsArray -> [{ x: xVariable, y: yVariable, label: labelVariable, count: countVariable, location : locationVariable }, {second element...}, {third element...}];
SecondGraphPointsArray -> [a similar array...]

如何从这些数组获取更多属性（标签，计数，位置）到contentGenerator：函数（d）中。如上所述，我只从函数参数（d）中收到默认值

    console.log(JSON.stringify(d.series[0]));
    //{"key":"Name","value":1000,"color":"rgba(255,140,0, 1)"}

Answer 1

我想出了一个解决方案，想与他人分享，以防其他人遇到相同的任务。我最终通过默认路由从d访问一些参数-function（d），而一些自定义参数-直接从$ scope.data访问。

重要：使用 d.index ，它表示数据点在列表中的位置非常重要。这样可以确保对于任何给定的索引，从function（d）提取的参数和直接提取的参数都属于同一数据点（请参见下面的代码）。

interactiveLayer: {
  tooltip: {
    contentGenerator: function (d) {
      var customTooltipcontent = "<h6 style='font-weight:bold'>" + d.value + "</h6>";

    customTooltipcontent += "<table class='custom-tooltip-table'>";
    customTooltipcontent += "<tr style='border-bottom: 1px solid green;'><td></td><td>Name</td><td>Value</td><td>Count</td></tr>";
    for (var i = 0; i < d.series.length; i++) {
      customTooltipcontent += "<tr><td><div style='width:10px; height:10px; background:" + d.series[i].color + "'></div></td><td>" + d.series[i].key + "</td><td>" + d.series[i].value + "</td><td>" + $scope.data[0].values[d.index].count + "</td><td>" + $scope.data[0].values[d.index].location + "</td></tr>"
    }
    customTooltipcontent += "</table>";

    return (customTooltipcontent);
    }
   }
 }

如何在Angular NVD3折线图中的工具提示系列中添加更多属性

1 个答案: