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

【问题标题】：How to add more attributes in tooltip series in Angular NVD3 line chart如何在 Angular NVD3 折线图中的工具提示系列中添加更多属性
【发布时间】：2021-01-11 00:24:06
【问题描述】：

如果可能，我需要在 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)'
}
]

最后是data中数组的结构：

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)"}

【问题讨论】：

• 您可以将此 contentGenerator 函数与您自己的代码一起使用来生成自定义工具提示，以更改工具提示中的 HTML 结构。您可以“克隆”原始 HTML，并在工具提示表中包含新的 和 以获取其他参数。似乎是更改工具提示中包含的默认参数/值数量的唯一方法。你试过这种方法吗？
• 感谢您的 cmets。下面我分享一下我想出的答案。
• 不客气！很高兴知道您找到了解决方案。