与之交互后关闭 C3 工具提示答案

【问题标题】：Closing C3 tooltip after interacting with it与之交互后关闭 C3 工具提示
【发布时间】：2017-11-03 17:07:03
【问题描述】：

我正在学习将 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;
        }
    }
});

【问题讨论】：

标签： javascript css charts tooltip c3.js

【解决方案1】：

如果您想在
(1) 点击工具提示时隐藏它或
(2) 超时时间已过
你需要

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

类似这样的：

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

【讨论】：

不错！非常感谢。