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

问题

I need to add more attributes in tooltip series in Angular NVD3 line chart, if possible, without modifying the NVD3 source code. I know there are similar posts, but none of them covers this scenario.

Here is my tooltip section in options:

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

And here is my data:

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

Finally, the structure of the arrays in data:

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

How to get more attributes (label, count, location) from these arrays into the contentGenerator: function (d). As mentioned above, I only receive the default ones from within function parameter (d)

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

回答1:

I came up with a solution and wanted to share it, in case someone else comes across the same task. I ended up accessing some of the parameters from d through the default route - function(d), while some of the custom ones - directly from $scope.data.

Important: using the d.index, which indicates the place of the data point in the list is critical hear. This makes sure that for any given index the parameters pulled from the function(d) and those of pulled directly, belong to the same data point (see the code below).

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

来源：https://stackoverflow.com/questions/64051027/how-to-add-more-attributes-in-tooltip-series-in-angular-nvd3-line-chart

标签

tooltip

nvd3.js

angular-nvd3