我是新来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>",
}
我已经参观了以下链接没有帮助:
和一些更喜欢这些。
有人告诉路径,谁失去了自己在这些图表的人吗?