使用Chart.js库时,我可以在页面上添加多个甜甜圈而不会出现问题 .
http://www.chartjs.org/docs/#doughnut-pie-chart
但我找不到工具提示的方法 - 不仅仅是将鼠标悬停在甜甜圈上 . 有人知道这是否可行?
使用Chart.js库时,我可以在页面上添加多个甜甜圈而不会出现问题 .
http://www.chartjs.org/docs/#doughnut-pie-chart
但我找不到工具提示的方法 - 不仅仅是将鼠标悬停在甜甜圈上 . 有人知道这是否可行?
5 回答
我今天遇到了同样的问题,通过添加onAnimationComplte和tooltipevents选项很容易解决 .
onAnitmationComplete调用该方法来显示像悬停事件一样的工具提示 . 通常,您在tooltipevents中定义事件以显示工具提示,但我们需要删除它们并传递一个空数组 .
注意:( http://www.chartjs.org/docs/#doughnut-pie-chart) .
使用Javascript:
HTML:
示例数据:
JSFiddle PIE:http://jsfiddle.net/5gyfykka/
JSFiddle BAR / LINE:http://jsfiddle.net/5gyfykka/14/
您可以通过编写支持ChartJS版本> 2.1.5的自己的插件来完成此操作 .
在脚本中包含以下代码:
然后,只需在要显示所有可用工具提示的任何图表的选项中使用以下行 .
工作小提琴如下
在这里工作JSFIDDLE .
我扩展了Kapi的方法,所以当你将鼠标悬停在它上面时,你仍然可以保持默认功能,如颜色变化,当你将鼠标悬停在一个部分上时,它将隐藏其余部分 . 我觉得它看起来更好 .
如果有人试图隐藏某些段工具提示;在tooltipTemplate中执行:
例如,此代码检查%值,仅显示高于8%的值以减少混乱
如果您只想显示一个工具提示,则必须使用此代码 . 这是第一部分的优点 .
函数showTooltip仅接受第一个参数的2维数组 .