javascript - 与其交互后关闭 C3 工具提示

Question

我正在学习将 C3.js 用于图表，我想更好地自定义工具提示功能。通常，当您将鼠标悬停在数据上时，会出现 C3 工具提示。 Example here.它们不会持续存在，您无法与它们互动。

我在 Stack Overflow 上找到了一些代码 (link here)添加超时和 CSS 以使工具提示持续存在并允许用户与之交互，但我不知道如何通过用户单击图表或工具提示上的某处或通过使用超时。我认为让工具提示在出现后永远保留在图表上很烦人。

JSFiddle

应该有一个我可以调用或覆盖的函数，不是吗？我尝试添加一个 onclick 功能，这样当我点击一个数据点时，它会做一些事情，但我没有找到一种方法让它做我想做的事。我关注了this link弄清楚如何执行 onclick。

data: {
  columns: [ ['data1', 40, 50, 60, 70, 80] ],
  types: { data1: 'bar'},
  onclick: function(e) { alert(e.value); }
}

我不确定我是否特别关心如何触发关闭工具提示。以下是来自 JSFiddle 的代码，演示了与工具提示的交互以及它如何不关闭。

CSS:

.c3-tooltip-container {
    background-color: #ccc;
    border: solid 1px black;
    padding: 20px;
    pointer-events: auto !important;
}

JS:

var features = dates = defects = [
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10
];

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30000, 20000, 10000, 40000, 15000, 250000],
            ['data2', 100, 200, 100, 40, 150, 250]
        ],
    },
    tooltip: {
        position: function () {
            var position = c3.chart.internal.fn.tooltipPosition.apply(this, arguments);
            position.top = 0;
            return position;
        },
        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;
        }
    }
});

Answer 1

如果你想隐藏tooltip时
(1) 你点击它 或者
(2)超时已过
你需要

• 改变工具提示可见性的函数
• 处理点击 Action 的函数
• 定时器停止/重启的定时器存储

像这样:

// 1
window.action = function() {
    // do something
    // ...
    clearTimeout(timeout);
    hideTooltip();
}

// timer storage
var timeout;

var chart = c3.generate({
    ...
    tooltip: {
        position: ...
        contents: function (...) {
            // 2
            clearTimeout(timeout);
            timeout = setTimeout(hideTooltip, 5000); // auto-hide after 5 seconds

            ...
            text = "<div id='tooltip' class='d3-tip' onclick='window.action()'>";
            ...
            return text;
        }
    }
});

// disable default
c3.chart.internal.fn.hideTooltip = function (){};

// custom tooltip hiding
var hideTooltip = function() {
    d3.select('.c3-tooltip-container').style('display', 'none');
}

看看updated fiddle .