Javascript 自定义工具提示的tooltipContent,其数据位于discreteBarChart nvd3.js中
如何使用加载到discreteBarChart nvd3.js“datum”中的数据自定义工具提示的tooltipContent?例如,对于以下数据Jason,我希望在工具提示中看到data3、data4、Data5Javascript 自定义工具提示的tooltipContent,其数据位于discreteBarChart nvd3.js中,javascript,d3.js,tooltip,nvd3.js,Javascript,D3.js,Tooltip,Nvd3.js,如何使用加载到discreteBarChart nvd3.js“datum”中的数据自定义工具提示的tooltipContent?例如,对于以下数据Jason,我希望在工具提示中看到data3、data4、Data5 JsonData = [ { key: "Serie1", values: [ {'Data1': 1,
JsonData = [
{
key: "Serie1",
values: [
{'Data1': 1,
'Data2': 2,
'Data3': 3,
'Data4': 4,
'Data5': 5
}
]
}
];
这是如何做到的:
nv.addGraph(function() {
var chart = nv.models.discreteBarChart()
.x(function(d) { return d.Data1 })
.y(function(d) { return d.Data2 })
.tooltips(true)
.tooltipContent(function(key, y, e, graph) {
var data =graph.series.values[y-1];
return '<p> Text1: ' + data.Data3 + '</p>'
+ '<p> Text2: ' + data.Data4 + '</p>'
+ '<p> Text3: ' + data.Data5 + '</p>'
});
d3.select('#chart svg')
.datum(JsonData)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
nv.addGraph(函数(){
var chart=nv.models.discreteBarChart()
.x(函数(d){返回d.Data1})
.y(函数(d){返回d.Data2})
.工具提示(true)
.ToolTicContent(函数(键、y、e、图形){
var数据=图形系列值[y-1];
返回“Text1:”+data.Data3+”'
+“Text2:”+data.Data4+”'
+“Text3:”+data.Data5+”'
});
d3.选择(“#图表svg”)
.数据(JsonData)
.电话(图表);
nv.utils.windowResize(图表更新);
收益表;
});
我想到了类似的方法,因为graph对象有一个value属性:
chart.tooltipContent(function (key, date, e, graph) {
var value = graph.value;
return "<p><strong>" + date + "</strong><br>" + value + "</p>";
});
chart.tooltipContent(函数(键、日期、e、图形){
var值=graph.value;
返回“”+日期+”
“+值+””;
});
我想不需要访问series阵列。这是一个贡献,谢谢,抱歉。现在更改帖子。在我的例子中,技巧是:
graph.point.x
,graph.point.y
,graph.point.anything
。