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

Question

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

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

应该有一个我可以调用或覆盖的函数，不是吗？我尝试添加一个 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

如果你想在
时隐藏工具提示 (1)你点一下或者
(2) 超时已过
你需要

用于更改工具提示可见性的函数
处理点击动作的函数
计时器的计时器存储 stop/restart

像这样：

// 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。

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

Closing C3 tooltip after interacting with it

javascript

css

charts

tooltip

c3.js