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

如果你想在白色时隐藏工具提示 （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。

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

1 个答案: