Morris.js 条形图的自定义悬停图例答案

【问题标题】：Custom Hover Legend for Morris.js Bar ChartMorris.js 条形图的自定义悬停图例
【发布时间】：2016-07-16 20:59:05
【问题描述】：

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

莫里斯图

【问题讨论】：

标签： javascript morris.js

【解决方案1】：

试试这个：

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>

【讨论】：