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

Question

我是 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

还有一些类似的。

有人可以指出在这些图表中迷失自己的人的路径吗？

Answer 1

请尝试以下代码段。

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

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>

Answer 2

在morris.js文件中，您必须在悬停功能下添加以下代码行。

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

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

Morris.js click event on tooltip need to be called

javascript

jquery

morris.js