Javascript C3图表-工具提示的内容可单击
我正在用电脑制作图表。我必须使工具提示的内容可修改。到目前为止,工具提示只有在我将鼠标悬停在图表上时才可见。当我单击工具提示中的链接时,会显示一些信息。我找不到他的任何帮助。我正在处理的代码片段如下所示Javascript C3图表-工具提示的内容可单击,javascript,jquery,c3,Javascript,Jquery,C3,我正在用电脑制作图表。我必须使工具提示的内容可修改。到目前为止,工具提示只有在我将鼠标悬停在图表上时才可见。当我单击工具提示中的链接时,会显示一些信息。我找不到他的任何帮助。我正在处理的代码片段如下所示 $scope.timelineConfig.tooltip.contents = function (data, defaultTitleFormat, defaultValueFormat, color) { var $$ = this, config = $$.config,
$scope.timelineConfig.tooltip.contents = function (data, defaultTitleFormat, defaultValueFormat, color) {
var $$ = this, config = $$.config,
titleFormat = config.tooltip_format_title || defaultTitleFormat,
nameFormat = config.tooltip_format_name || function (name) { return name; },
valueFormat = config.tooltip_format_value || defaultValueFormat,
text, i, title, value;
text = "<div id='tooltip' class='d3-tip'>";
title = dates[data[0].index];
text += "<span class='info'><b><u>Date</u></b></span><br>";
text += "<span class='info'>"+ title +"</span><br>";
text += "<span class='info'><b><u>Features</u> : </b> " + features[data[0].index] + "</span><br>";
text += "<span class='info'><b><u>Enhancements</u> : </b> " + defects[data[0].index] + "</span><br>";
text += "</div>";
return text;
};
$scope.timelineConfig.tooltip.contents=函数(数据、默认标题格式、默认值格式、颜色){
var$$=this,config=$$.config,
titleFormat=config.tooltip_format|u title | | defaultTitleFormat,
nameFormat=config.tooltip_format_name | |函数(name){return name;},
valueFormat=config.tooltip_format_value | | defaultValueFormat,
文本、i、标题、值;
text=“”;
标题=日期[数据[0]。索引];
text+=“日期
”;
文本+=“”+标题+”
”;
text+=“Features:“+Features[数据[0]。索引]+”
”;
text+=“增强:”+缺陷[数据[0]。索引]+“
”;
文本+=”;
返回文本;
};
我必须使内容(功能…
)可单击。首先(如果您尚未这样做)覆盖工具提示位置,以便在您尝试单击它时它不会一直跑开
tooltip: {
position: function () {
var position = c3.chart.internal.fn.tooltipPosition.apply(this, arguments);
position.top = 0;
return position;
},
然后,您需要覆盖hideTooltip函数,以便在检测到click事件之前它不会关闭
var originalHideTooltip = chart.internal.hideTooltip
chart.internal.hideTooltip = function () {
setTimeout(originalHideTooltip, 100)
};
然后,您只需要覆盖
指针事件
样式(这样鼠标事件就不会被忽略),然后像在jQuery中一样附加处理程序
$(".c3-tooltip-container")
.css("pointer-events", "auto")
.on('click', '.info:eq(2)', function () {
// add click functionality here. you could pass in additional data using the span attributes
alert($(this).text())
})
根据需要修改选择器(如添加图表包装id…)
Fiddle-我知道我是在评论一个老问题,但为了便于参考,以防其他人需要它,我修改了上面的答案以适用于我的代码 在我的CSS中:
.c3-tooltip-container {
pointer-events: auto !important;
}
在JS中:
c3.chart.internal.fn.hideTooltip = function () {
setTimeout(c3.chart.internal.fn.hideTooltip, 100);
};
职位代码似乎是可选的。但固定顶可能更方便用户使用
tooltip: {
position: function () {
var position = c3.chart.internal.fn.tooltipPosition.apply(this, arguments);
position.top = 0;
return position;
},
感谢@potatopeelings让我开始做这件事——这是一个巨大的帮助