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

时间:2015-07-21 07:02:43

标签: javascript jquery c3

我使用c3.js制作图表。我必须使工具提示的内容变成cilckable。直到现在,仅当我将鼠标悬停在图表上时,工具提示才可见。当我点击工具提示中的链接时,我会显示一些信息。我无法从c3 documentation找到任何帮助。我正在处理的代码片段如下所示。

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

我必须使内容(<span><b><u>Features...</u></b></span>)可点击。

2 个答案:

答案 0 :(得分:3)

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

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/

答案 1 :(得分:1)

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

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