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

我正在使用c3.js制作图表。我必须使工具提示的内容可以被盗用。直到现在，只有当我将鼠标悬停在图表上时，工具提示才可见。我在点击工具提示中的链接时会显示一些信息。我从c3 documentation找不到任何帮助。下面显示了我正在处理的代码片段。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 = "<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; 
};

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

来源

2015-07-21 Vikram Singh Jadon

首先（如果您尚未这样做）覆盖工具提示位置，以便在您尝试点击它时不会跑开。

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

修改根据需要选择（如添加图表包装标识...）

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

来源

2015-07-21 12:30:28 potatopeelings

我知道我在评论一个老问题，但仅供参考以防其他人需要它时，我修改了上述答案以适用于我的代码。

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

来源

2017-11-02 23:09:34 Dallas

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

回答

相关问题