gpt4 book ai didi

javascript - Morris.js 条形图的自定义悬停图例

转载 作者:行者123 更新时间:2023-11-30 09:47:07 26 4
gpt4 key购买 nike

我希望自定义堆叠条形图上的悬停图例,这样它就不会显示在特定条形图中没有值但会显示在其他条形图中的标签。希望下面链接中的图片有助于解决问题。图片中的行军标签只有几个标签的值,但显示了所有标签。我知道我必须使用 hoverCallback 函数,但我不确定如何只返回带有数据的标签的内容。以下是条形图上的 morris.js 网页链接:morris.js .关于如何读取行数据或可能的解决方案的任何建议都将非常有帮助。我在这里先向您的帮助表示感谢!

莫里斯图

Stacked Bar Graph

最佳答案

试试这个:

new Morris.Bar({
element: 'bar-example',
data: [
{ t: "a", a: 2, b: 5, c: 2 },
{ t: "b", a: 3, b: null, c: null },
{ t: "c", a: 4, b: 8, c: 12 },
{ t: "d", a: null, b: 9, c: 15 }
],
xkey: 't',
ykeys: ['a', 'b', 'c'],
labels: ['Spotify', 'Apple', 'Uber'],
stacked: true,
hoverCallback: function (index, options, content, row) {
var finalContent = $(content);
var cpt = 0;

$.each(row, function (n, v) {
if (v == null) {
$(finalContent).eq(cpt).empty();
}
cpt++;
});

return finalContent;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>

<div id="bar-example"></div>

关于javascript - Morris.js 条形图的自定义悬停图例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38415570/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com