C3图表 – 工具提示可点击的内容

我正在使用c3.js制作图表。 我必须使工具提示的内容可以删除。 到目前为止，仅当我将鼠标hover在图表上时，工具提示才可见。 当我点击工具提示中的链接时，我会显示一些信息。 我找不到c3文档的任何帮助。 我正在处理的代码片段如下所示。

$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 = "
"; title = dates[data[0].index]; text += "Date
"; text += ""+ title +"
"; text += "Features :  " + features[data[0].index] + "
"; text += "Enhancements :  " + defects[data[0].index] + "
"; text += "
"; return text; }; 

我必须使内容（ Features... ）可点击。

Answer 1

首先（如果您还没有这样做）覆盖工具提示位置，以便在您尝试单击它时它不会继续运行。

 tooltip: { position: function () { var position = c3.chart.internal.fn.tooltipPosition.apply(this, arguments); position.top = 0; return position; }, 

---

然后，您需要覆盖hideTooltip函数，以便在检测到单击事件之前不会关闭它。

 var originalHideTooltip = chart.internal.hideTooltip chart.internal.hideTooltip = function () { setTimeout(originalHideTooltip, 100) }; 

---

然后，您只需要覆盖pointer-events样式（以便不忽略鼠标事件），然后像往常一样在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 …）

---

小提琴 – http://jsfiddle.net/5vbeb4k8/

Answer 2

我知道我正在评论一个旧问题，但仅供参考以防其他人需要它，我修改了上述答案以便为我的代码工作。

在我的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让我开始这个 – 这是一个巨大的帮助。