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

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

还有一些更喜欢这些。

有人可以展示在这些图表中迷失自我的人的道路吗？

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

<\ n>在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点击事件

2 个答案: