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

假如想象 提交于 2020-12-15 08:34:38

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!