c3.js - 获取悬停数据点的 X 轴值

Question

当用户将鼠标悬停在折线图中的数据点上时，我想获取该特定数据点的 X 轴值，以便我可以根据该值定位工具提示。有没有办法做到这一点？这个想法是获取 X 中的值并减去工具提示容器宽度以将其定位在该点的左侧，以避免工具提示覆盖数据时出现问题。

到目前为止我的代码:

http://jsfiddle.net/owhxgaqm/292/

// c3 - custom tooltip
var chart = c3.generate({
    bindto: '#chart-test',
    data: {
        columns: [
            ['data1', 100, 200, 150, 300, 200],
            ['data2', 400, 500, 250, 700, 3000000000000], ]
    },
    tooltip: {
         position: function(data, width, height, thisElement) {
          var containerWidth, tooltipWidth, x, y;
          element = document.getElementById("chart-test");
          containerWidth = element.clientWidth;
          tooltipWidth = element.querySelector('.c3-tooltip').clientWidth * 2;
          x = parseInt(thisElement.getAttribute('x'));
          console.log("x is " + x)
          console.log("tooltipWidth is " + tooltipWidth)
          console.log("data is " + data)
          console.log("thisElement is " + thisElement)
          if (x + tooltipWidth > containerWidth) {
            x = containerWidth - tooltipWidth - 2;
          }
          y = thisElement.getAttribute('y');
          y = y - height;
          return {
            top: y,
            left: x
          };
        }
    }
});

Answer 1

可能这可能会有所帮助!!!

tooltip: {
    show: true,
    grouped: true,
    contents: function (d, 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, name, bgcolor;
            for (i = 0; i < d.length; i++) {
                    if (!(d[i] && (d[i].value || d[i].value === 0))) {
                            continue;
                    }
                    if (!text) {
                            title = titleFormat ? titleFormat(d[i].x) : d[i].x;
                            text = '<table class=\'' + $$.CLASS.tooltip + '\'>' + (title || title === 0 ? '<tr><th colspan=\'2\'>' + title + '</th></tr>' : '');
                    }
                    name = d[i].name;
                    value = d[i].value, d[i].ratio, d[i].id, d[i].index;
                    bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);
                    text += '<tr class=\'' + $$.CLASS.tooltipName + '-' + d[i].id + '\'>';
                    text += '<td class=\'name\'><span style=\'background-color:' + bgcolor + '\'></span>' + name + '</td>';
                    text += '<td class=\'value\'>' + value + '</td>';
                    text += '</tr>';
            }
            return text + '</table>';
    }
}

上面的代码用于操作内容，内容正是原始内容，可以通过编辑进行相应的修改。
具体到您的问题，您可能可以提供填充以避免工具提示与数据点重叠。只需在上面的表格标记上指定样式。