C3圖表 - 可點擊的工具提示內容

我正在使用c3.js製作圖表。我必須使工具提示的內容可以被盜用。直到現在，只有當我將鼠標懸停在圖表上時，工具提示纔可見。我在點擊工具提示中的鏈接時會顯示一些信息。我從c3 documentation找不到任何幫助。下面顯示了我正在處理的代碼片段。C3圖表 - 可點擊的工具提示內容

$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; 
};

我必須使內容（Features...）可點擊。

來源

2015-07-21 Vikram Singh Jadon

首先（如果您尚未這樣做）覆蓋工具提示位置，以便在您嘗試點擊它時不會跑開。

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

然後，你需要讓前可以被檢測到您的點擊事件不會關閉覆蓋hideTooltip功能。

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

然後，你只需要覆蓋pointer-events風格（讓鼠標事件不會忽略不計），然後再連接處理程序，你通常會在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()) 
    })

修改根據需要選擇（如添加圖表包裝標識...）

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

來源

2015-07-21 12:30:28 potatopeelings

我知道我在評論一個老問題，但僅供參考以防其他人需要它時，我修改了上述答案以適用於我的代碼。

在我的CSS：

.c3-tooltip-container { 
    pointer-events: auto !important; 
}

在JS：

c3.chart.internal.fn.hideTooltip = function() { 
    setTimeout(c3.chart.internal.fn.hideTooltip, 100); 
};

位置代碼似乎是可選的。但固定頂端可能更加用戶友好。

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

感謝@potatopeelings讓我從這開始 - 這是一個巨大的幫助。

來源

2017-11-02 23:09:34 Dallas

C3圖表 - 可點擊的工具提示內容

回答

相關問題