微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

如果可能的话,我需要在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,1)"}

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

这是我的数据:

$scope.data =
[
{
  values: FirstGraPHPointsArray,key: 'Name',color: 'rgba(255,1)'
},{
   values: SecondGraPHPointsArray
   key: 'City',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",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);
    }
   }
 }

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。