需要调用工具提示上的 Morris.js 点击事件答案

【问题标题】：Morris.js click event on tooltip need to be called需要调用工具提示上的 Morris.js 点击事件
【发布时间】：2017-08-15 07:53:40
【问题描述】：

我是 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>",
}

我已经访问了以下没有帮助的链接：

还有一些类似的。

有人能告诉在这些图表中迷失自我的人的道路吗？

【问题讨论】：

标签： javascript jquery morris.js

【解决方案1】：

在 morris.js 文件中，你必须在 Hover 函数下添加以下代码行。

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);

【讨论】：

【解决方案2】：

请尝试以下sn-p。

鼠标悬停在条上时，它会显示带有数据的工具提示
单击工具提示时，会显示带有数据的警报

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>

【讨论】：