C3图表-可点击的工具提示内容 [英] C3 charts - contents of tooltip clickable

问题描述

我正在使用 c3.js 制作图表.我必须使工具提示的内容易于辨认.到现在为止，只有当我将鼠标悬停在图表上方时，工具提示才可见.当我单击工具提示中的链接时，我将显示一些信息.我从 c3文档中找不到任何帮助.我正在处理的代码片段如下所示.

I am making charts using c3.js. I have to make the contents of the tooltip cilckable. Till now, the tooltip is visible only when i hover over the chart. I have some Information which is to be displayed when i click on a link in the tooltip. I couldn't find any help from c3 documentation. Snippet of the code i am working on is shown below.

$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>)可单击.

I have to make the contents (<span><b><u>Features...</u></b></span>) clickable.

推荐答案

首先(如果您尚未这样做)覆盖工具提示的位置，这样当您单击它时它就不会消失.

First (if you haven't already done so) override the tooltip position so that it doesn't keep running away when you try to click it.

tooltip: {
    position: function () {
        var position = c3.chart.internal.fn.tooltipPosition.apply(this, arguments);
        position.top = 0;
        return position;
    },

---

然后，您需要覆盖hideTooltip函数，以使其在检测到您的click事件之前不会关闭.

---

Then you need to override the hideTooltip function so that it doesn't close before your click event can be detected.

var originalHideTooltip = chart.internal.hideTooltip
chart.internal.hideTooltip = function () {
    setTimeout(originalHideTooltip, 100)
};

---

然后，您只需要覆盖pointer-events样式(这样就不会忽略鼠标事件)，然后像平常在jQuery中那样附加处理程序

---

Then, you just need to override the pointer-events style (so that the mouse events are not ignored) and then attach the handler as you normally would in 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 ...)

Modify the selector as required (like adding the chart wrapper id...)

提琴- http://jsfiddle.net/5vbeb4k8/

这篇关于C3图表-可点击的工具提示内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！