C3 图表 - 工具提示的内容可点击
C3 charts - contents of tooltip clickable
我正在使用 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 制作图表。我正在处理的代码片段如下所示。
$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>
) 可以点击。
首先(如果您还没有这样做的话)覆盖工具提示的位置,这样当您尝试单击它时它就不会 运行 离开。
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())
})
根据需要修改选择器(例如添加图表包装器 ID...)
Fiddle - http://jsfiddle.net/5vbeb4k8/
我知道我是在评论一个老问题,但仅供参考以防其他人需要它,我修改了上面的答案以适用于我的代码。
在我的 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 让我开始使用它——这是一个巨大的帮助。
我正在使用 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 制作图表。我正在处理的代码片段如下所示。
$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>
) 可以点击。
首先(如果您还没有这样做的话)覆盖工具提示的位置,这样当您尝试单击它时它就不会 运行 离开。
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())
})
根据需要修改选择器(例如添加图表包装器 ID...)
Fiddle - http://jsfiddle.net/5vbeb4k8/
我知道我是在评论一个老问题,但仅供参考以防其他人需要它,我修改了上面的答案以适用于我的代码。
在我的 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 让我开始使用它——这是一个巨大的帮助。