參考資料：
1. 互動圖表之提示條
2. 互動式之提示框
效果圖：
源碼：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>" target="_blank" rel="external nofollow" >
<title>d3-提示框tooltip</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css" target="_blank" rel="external nofollow" >
-->
<script type="text/javascript" src="js/d3/d3.js"></script>
<script type="text/javascript" src="js/d3/d3.min.js"></script>
<!--position:absolute;設定絕對路徑很重要，要是沒有設定的話，
提示框的div就無法根據滑鼠移到的位置而在不同位置顯示(沒有設定隻會在圖檔的下方顯示) -->
<style type="text/css">
.tooltip{
font-family:simsun;
font-size:16px;
width:120;
height:auto;
position:absolute;
text-align:center;
border-style:solid;
border-width:1px;
background-color:white;
border-radius:5px;
}
</style>
</head>
<body>
<script type="text/javascript">
var width = 600;
var height = 600;
//設定 餅圖的内半徑 和外半徑（如果 内半徑不為0的話，顯示的是圓環圖）
var outerRadius = width/3;
var innerRadius = 0;
var dataset =[["小米",200],["華為",400],["聯想",300],["魅族",100],["WP",230]];
//建立一個svg圖檔
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height);
//轉換資料
var pie = d3.layout.pie()
.value(function(d){
return d[1];
});
var piedata =pie(dataset);
//建立弧生成器
var arc = d3.svg.arc()
.outerRadius(outerRadius)
.innerRadius(innerRadius);
//顔色（20種顔色可自動選擇）
var color = d3.scale.category20();
//添加對應數目的弧
var arcs=svg.selectAll("g")
.data(piedata)
.enter()
.append("g")
//圓心坐标
.attr("transform","translate("+outerRadius+","+outerRadius+")");
//通過路徑繪制弧
arcs.append("path")
.attr("fill",function(d,i) //設定弧填充的顔色
{
return color(i);
})
.attr("d",function(d) //按資料生成對應的弧
{
return arc(d);
}
);
//繪制弧内的文字
arcs.append("text")
//位置
.attr("transform",function(d,i)
{
//centroid(d)是取弧的重心
var x = arc.centroid(d)[0]*1.5;
var y = arc.centroid(d)[1]*1.5;
//傳回文字顯示的坐标
return "translate("+x+","+y+")";
})
.attr("text-anchor","middle")
.style("font-size",16)
.text(function(d,i)
{
//求所占百分比
var percent =Number(d.value)/d3.sum(dataset,function(d){return d[1];})*100;
//toFixed(num) 四舍五入為規定小數的位數，num為小數位數
return percent.toFixed(1)+"%";
});
//---------------------------------1.d3中的title标簽提示框
arcs.append("title")
.text(function(d)
{
return d.data[0]+"銷售量是"+d.data[1]+"百萬台";
});
//------------------------------------2.div提示框,通過設定透明度（opacity屬性）實作 顯示和隐藏
//添加提示框的div
var tooltip = d3.select("body").append("div")
.attr("class","tooltip") //用于css設定類樣式
.attr("opacity",0.0);
//響應事件
//-滑鼠移入事件
arcs.on("mouseover",function(d)
{
//設定tooltip文字
tooltip.html(d.data[0]+"銷售額為"+"<br/>"+d.data[1]+"百萬台")
//設定tooltip的位置(left,top 相對于頁面的距離)
.style("left",(d3.event.pageX)+"px")
.style("top",(d3.event.pageY+20)+"px")
.style("opacity",1.0);
})
//--滑鼠移出事件
.on("mouseout",function(d)
{
tooltip.style("opacity",0.0);
});
//-----------------------------------3.svg中的text标簽提示框
arcs.on("mouseover",function(d)
{
//var x = parseFloat(d3.select(this).attr("x")); 這個我的無法獲得他們的值
//var y =parseFloat(d3.select(this).attr("y")+20);
var x =d3.event.pageX;
var y =d3.event.pageY+30;
//添加标簽
svg.append("text")
.attr("id","tooltip")
.attr("x",x)
.attr("y",y)
.attr("text-anchor","middle")
.attr("font-family","sans-setif")
.attr("font-size","11px")
.attr("font-weight","bold")
.attr("fill","black")
//文本内容
.text("銷售量為"+d.value);
})
//滑鼠移出時通過ID移除标簽
.on("mouseout",function(d)
{
d3.select("#tooltip").remove();
});
</script>
</body>
</html>
以上就是三種圖表互動的方法。
![echarts折線圖柱狀圖的坐标軸的顔色及樣式的設定[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)