Morris.js条形图的自定义悬停图例
苏杰·加兰卡（Sujay Garlanka）
我想在堆积的条形图上自定义悬停图例，这样它就不会在特定的条形图中不显示没有值的标签，而在其他条形图中显示。希望下面链接中的图片可以帮助您解决问题。图片中用于行进的标签仅具有几个标签的值，但显示所有标签。我知道我必须使用hoverCallback函数，但是我不确定如何仅返回带有数据的标签的内容。以下是条形图上morris.js网页的链接：morris.js。关于如何读取行数据的任何建议或可能的解决方案将非常有帮助。我在这里先向您的帮助表示感谢！
莫里斯图
rl
试试这个：
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Morris.js条形图缺少标签
- 2
Morris.js条形图未显示evey xkey
- 3
使用morris-conf.js选择选项值后如何替换条形图？
- 4
条形图图例中变量的自定义排序
- 5
Morris.js区域图定制
- 6
将JSON转换为正确的格式以放入Morris条形图插件
- 7
将JSON转换为正确的格式以放入Morris条形图插件
- 8
使用Morris可以将组合图（面积图和条形图）一起使用吗？
- 9
使用Morris.js毕业于YAxis
- 10
使用Morris.js跳过空值
- 11
Morris.js-有什么设置方法？
- 12
Morris.js中的奇怪变量修改
- 13
在laravel中为morris js创建数组
- 14
morris.js虚线网格
- 15
morris.js得出错误的值
- 16
Morris.js xKey添加废话值
- 17
Morris.js 图表设计修复
- 18
morris.js能否仅在悬停时显示圆圈
- 19
可以使用morris.js创建SED图吗？
- 20
在鼠标悬停事件上禁用Morris.js甜甜圈图部分选择
- 21
熊猫条形图中的自定义图例（matplotlib）
- 22
Google条形图-自定义图例文本，其总值和表格图的按列总计
- 23
分页/ Zurb Foundation导致Morris.js图表呈现问题
- 24
X轴上的图表线morris.js格式日期
- 25
如何在Morris.js中使用本地json数据？
- 26
Morris.js咖啡文件的日期的正确格式是什么
- 27
morris.js解析json字符串错误
- 28
Morris js以百分比格式显示值
- 29
在PHP中使用多维数组填充morris.js图表
我来说两句