Morris.js点击需要的工具提示的事件被称为

问题描述：

我是新来morris.js和已经使用了图形。一切工作正常，工具提示也显示出来，但我想使它具有悬停功能的可点击性：当用户将鼠标悬停在栏上时，应显示工具提示，当他点击该工具提示时，我必须生成警报。我已经有了可点击的功能，但我也需要提示工具提示。Morris.js点击需要的工具提示的事件被称为

这里是制杆可点击的功能：

var InitiateBarChartCustom2 = function() { 
    return { 
     init: function() { 
      var chart = Morris.Bar({ 
       element: 'bar-chart2', 
       data: volumeData, 
       xkey: 'y', 
       ykeys: ['a', 'b'], 
       labels: volumeLabels, 
       hideHover: 'auto', 
       barColors: ['#005a2b', '#B10933'], 
       overlapped: '1', 
       showBarLabels: false, 
       xLabelMargin: 7 
      }); 

      var thisDate, thisData; 

      $("#bar-chart2 svg rect").on('click', function() { 
       thisDate = $(".morris-hover-row-label").html(); 
       thisDataHtml = $(".morris-hover-point").html().split(":"); 
       thisData = thisDataHtml[0].trim(); 
       showdetails(thisDate); 
      });

这里是我需要点击工具提示：

下面是标签代码：

chart.options.labels.foreach(function (label, i) { 
    var legendlabel = $('<span style="display: inline-block;">' + label + '</span>'); 
    var legenditem = $('<div class="mbox"></div>').css('background-color', chart.options.barcolors[i]).append(legendlabel); 
    $('#legend').innerhtml = ''; 
    $('#legend').append(legenditem); 
})

这里是我的div正在动态生成的：

tooltip: true, 
tooltipOpts: { 
    defaultTheme: false, 
    content: "<div class='morris-hover morris-default-style' ><div class='morris-hover-row-label'>xtick</div><div style='color: rgb(177, 9, 51)' class='morris-hover-point'> Enquiries: %1y </div><div style='color: rgb(177, 9, 51)' class='morris-hover-point'> Sales/Enquiries Ratio: %2y% </div></div>", 
}

我已经参观了以下链接没有帮助：

Morris graphs. Have custom tooltip when hover
click event on morris bar

和一些更喜欢这些。

有人告诉路径，谁失去了自己在这些图表的人吗？

答

警报在morris.js文件，你有TADD以下

下的代码行

fuction Hover(options)

这里是代码，你必须编辑

this.el.on('click', function() { 
    var thisDate, thisData; 
    thisDate = $(".morris-hover-row-label").html(); 
    thisDataHtml = $(".morris-hover-point").html().split(":"); 
    thisData = thisDataHtml[0].trim(); 
    showdetails(thisDate); 
    showdetails(thisDate);

答

请尝试下面的代码片段。

鼠标悬停酒吧，它会显示与数据
在点击工具提示中提示，它显示的数据

var InitiateBarChartCustom2 = function() { 
 
    return { 
 
     init: function() { 
 
      var chart = Morris.Bar({ 
 
       element: 'bar-chart2', 
 
       data: [ 
 
        {date: "March", actual: 2, forecast: 22}, 
 
        {date: "April", actual: 48, forecast: 41}, 
 
        {date: "May", actual: 3, forecast: 10}, 
 
        {date: "June", actual: 34, forecast: 65}, 
 
        {date: "July", actual: 67, forecast: 13} 
 
       ], 
 
       xkey: 'date', 
 
       ykeys: ['actual', 'forecast'], 
 
       labels: ["Actual", "Forecast"], 
 
       hideHover: 'auto', 
 
       barColors: ['#005a2b', '#B10933'], 
 
       overlapped: '1', 
 
       showBarLabels: false, 
 
       xLabelMargin: 7 
 
      }); 
 

 
      $(".morris-hover").on("click", function() { 
 
       date = $(".morris-hover-row-label").html(); 
 
       dataHtml = $(".morris-hover-point"); 
 
       data = ""; 
 

 
       // Get the data 
 
       $(dataHtml).each(function() { 
 
        data += "\n" + this.innerText; 
 
       }); 
 

 
       // Display an alert with the date & data 
 
       showdetails(date, data); 
 
      }); 
 

 
      function showdetails(date, data) { 
 
       alert("[Date]\n" + date + "\n\n[Data]" + data); 
 
      } 
 
     } 
 
    } 
 
} 
 

 
InitiateBarChartCustom2().init();

<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-chart2"></div>

Morris.js点击需要的工具提示的事件被称为

相关推荐