标签:javascript tooltip d3-js scatter-plot nvd3-js
我正在使用nvd3 Scatter Chart,我看到可以使用以下功能自定义工具提示内容.
chart.tooltipContent(function (key, x, y, e, graph) {
return '<p><strong>' + key + '</strong></p>' +
'<p>' + e.value + ' in the month ' + x + '</p>';
});
当鼠标在气泡上移动时,会突出显示/显示自定义工具提示内容以及点/气泡的x值和y值.我想显示自定义内容,而不是显示x轴标签.我怎样才能做到这一点?
谢谢,
解决方法:
现在,nvd3中不推荐使用chart.tooltipContent.要在工具提示中使用自定义内容,您需要使用
chart.tooltip.contentGenerator(function(obj) {code to build tooltip})
要查看您在函数中使用哪些数据,请首先添加以下行:
chart.tooltip.contentGenerator(function (obj) { return JSON.stringify(obj)})
然后你就可以将鼠标悬停在数据点上并查看你正在使用的对象.
在src / tooltip.js中查看用于contentGenerator starting around line 76的默认函数,以查看您可以构建并传递给contentGenerator的函数类型的一个很好的示例
以下是文档documentation中的相关部分
标签:javascript,tooltip,d3-js,scatter-plot,nvd3-js 来源: https://codeday.me/bug/20190715/1466294.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。