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

Question

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

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

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

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

重要：使用d.index，表示数据点在列表中的位置是critical hear。这确保对于任何给定的索引，从函数 (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 折线图中的工具提示系列中添加更多属性

How to add more attributes in tooltip series in Angular NVD3 line chart

tooltip

nvd3.js

angular-nvd3