Il faut appeler l'événement click de Morris.js dans les info-bulles - javascript, jquery, morris.js

Je suis nouveau sur morris.js et je l’ai utilisé pour les graphiques. Tout fonctionne bien, l'info-bulle est également affichée, mais je souhaite la rendre également cliquable avec la fonctionnalité de survol: lorsque l'utilisateur survole sur une barre, l'info-bulle doit être affichée et lorsqu'il clique dessus, je dois générer une alerte. J'ai déjà une fonction qui rend les barres cliquables mais je veux aussi une info-bulle.

Voici la fonction qui rend les barres cliquables:

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

Voici l'infobulle que je dois rendre cliquable:

`

Voici le code pour l'étiquette:

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

Voici mon div qui est généré dynamiquement:

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

J'ai déjà visité les liens suivants qui n'ont pas aidé:

• Les graphiques de Morris. Avoir une info-bulle personnalisée en survol
• événement click sur morris bar

et quelques autres comme ceux-ci.

Quelqu'un peut-il montrer le chemin à l'homme qui s'est perdu dans ces charts?

Réponses:

dans le fichier morris.js vous avez tadd les lignes de code suivantes sous

fuction Hover(options)

voici le code que vous devez éditer

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

S'il vous plaît essayez l'extrait suivant.

• Sur le survol d'une souris, une barre affiche l'infobulle avec les données.
• En cliquant sur l'info-bulle, il affiche une alerte avec les données

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 + "nn[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>