c3.js – GEt悬停数据点的X轴值

概述当用户在线图中悬停一个数据点时,我想获得该特定数据点的X轴值,以便我可以根据该值定位工具提示.有没有办法可以做到这一点？我们的想法是获取X中的值并减去工具提示容器宽度以将其定位在该点的左侧,以避免覆盖数据的工具提示出现问题. 我的代码到目前为止： http://jsfiddle.net/owhxgaqm/292/ // c3 - custom tooltipvar chart = c3.gene 当用户在线图中悬停一个数据点时,我想获得该特定数据点的X轴值,以便我可以根据该值定位工具提示.有没有办法可以做到这一点？我们的想法是获取X中的值并减去工具提示容器宽度以将其定位在该点的左侧,以避免覆盖数据的工具提示出现问题.

我的代码到目前为止：

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

// c3 - custom tooltipvar 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          };        }    }});

解决方法 可能这可能有帮助!!!

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

上面的代码用于 *** 作与原始内容完全相同的内容,并且可以通过编辑进行相应的修改.根据您的问题,您可以提供填充以避免工具提示与数据点重叠.只需在上面的表格标记上指定样式即可.

总结

以上是内存溢出为你收集整理的c3.js – GEt悬停数据点的X轴值全部内容，希望文章能够帮你解决c3.js – GEt悬停数据点的X轴值所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。