鼠标悬停时显示（悬停）图表并在mouseout上隐藏图表

Question

我希望直观地表示图表/图表中的表格行数据，但只有当鼠标悬停在图表图标上时才会显示图表。

示例截图

Example link

将鼠标悬停在图表图标上会显示一个图表。

我对highcharts和google图表有基本知识，但不知道如何在鼠标悬停事件中显示和隐藏它们。我查看了上面链接页面的源代码，他们正在使用css canvas。（试图找出它是什么）

有人可以给我一个上述功能的简单演示/示例

Answer 1

这里有一个基本的例子，向您展示如何动态地将事件处理程序附加到元素并创建一个元素来保存（图表）要显示的数据，没有提供图表数据。再一次只是一个例子

一些css绝对定位图表容器相对于其父元素

 .chart-icon{position:relative;width:20px;height:20px;background:#aaa;margin:2px}
 div.chartContainer {position:absolute;left:40px;width:300px;height:300px;background:#fff;border:2px outset #666;overflow:hidden}


  <div id="charticon_i1" class="chart-icon">1</div>
  <div id="charticon_i2" class="chart-icon">2</div>
  <div id="skip">`<hr>`</div>
  <div id="charticon_i17" class="chart-icon">17</div>

var chart_icons = [];

chart_icons = document.getElementsByTagName("div");


for (var i = 0; i < chart_icons.length; i++) { 

  var txtchart = (chart_icons[i].id).slice(0,(chart_icons[i].id).lastIndexOf("_"));

  if(txtchart === "charticon"){

var ome = chart_icons[i].id;
// W3C way to add event listners
 if (document.body.addEventListener) {
 document.getElementById(chart_icons[i].id).addEventListener("mouseover", function (){displayChart(this)}, true);
 document.getElementById(chart_icons[i].id).addEventListener("mouseout", function (){removeChart(this)}, true);

  }else{
// IE lazy method 
 document.getElementById(chart_icons[i].id).onmouseover = function (){displayChart(this)};
 document.getElementById(chart_icons[i].id).onmouseout = function (){removeChart(this)};
 }


    }

}

function displayChart(oChart){
    var elem = document.createElement("div");
    elem.className = 'chartContainer';
    elem.id = 'chartContainer'; // id can be static because it will be removed form the DOM

// append the newly created div to the icon element
document.getElementById(oChart.id).appendChild(elem);

document.getElementById(elem.id).innerHTML = "TODO: Add Chart data, many ways of getting the data form already displayed as inline in the table, arrays, canvas, webservices.<h4>" + oChart.id + "</h4>";
}

function removeChart(oChart){

  var chartContainer = document.getElementById(oChart.id);
  // remove the container so the DOM dosnt get poluited
  chartContainer.removeChild(chartContainer.firstChild.nextSibling);

}