javascript – 使用discreteBarChart nvd3.js中的数据定制工具提示的工具提示内容

前端之家收集整理的这篇文章主要介绍了javascript – 使用discreteBarChart nvd3.js中的数据定制工具提示的工具提示内容前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我如何可以使用数据加载到“datum”中的自由工具提示工具提示nvd3.js?,例如,使用以下数据Jason,我想在工具提示中查看data3,data4,data5
  1. JsonData = [
  2. {
  3. key: "Serie1",values: [
  4. {'Data1': 1,'Data2': 2,'Data3': 3,'Data4': 4,'Data5': 5
  5. }
  6. ]
  7. }
  8. ];

解决方法

这是怎么做到的:
  1. nv.addGraph(function() {
  2. var chart = nv.models.discreteBarChart()
  3. .x(function(d) { return d.Data1 })
  4. .y(function(d) { return d.Data2 })
  5. .tooltips(true)
  6. .tooltipContent(function(key,y,e,graph) {
  7. var data =graph.series.values[y-1];
  8. return '<p> Text1: ' + data.Data3 + '</p>'
  9. + '<p> Text2: ' + data.Data4 + '</p>'
  10. + '<p> Text3: ' + data.Data5 + '</p>'
  11. });
  12.  
  13. d3.select('#chart svg')
  14. .datum(JsonData)
  15. .call(chart);
  16.  
  17. nv.utils.windowResize(chart.update);
  18.  
  19. return chart;
  20. });

猜你在找的JavaScript相关文章