日: 2014年12月7日

本家？
http://oreweb.toypark.in/jquery.canvasChart/

説明
http://wataame.sumomo.ne.jp/archives/3841

別のやつ

http://www.takuro.info/archives/5045

説明書いたる　動きあるからいいかも

さらに別のやつ　google
http://judenco-shogi.hatenablog.com/entry/2014/05/21/214605
説明
http://timing-web.com/google-chart-api/

他の設定
http://blog.lqd.jp/api/000027.html

利用したチャートJS

<canvas id="radar" height="290" width="340"></canvas>
    <script>
	
	var radarChartData = {
  labels : ["感動","笑い","ほっこり","驚き","LOVE","女性的","戦い","かっこいい","ミステリアス","飽きない","展開速度"],
  datasets : [
    {
      fillColor : "rgba(230,117,56,0.5)",
      strokeColor : "#E67538",
      pointColor : "#E67538",
      pointStrokeColor : "#fff",
      data : [4,1,4,1,1,0,2,1,0,4,3],
	  },
//    {
 //     fillColor : "rgba(151,187,205,0.5)",
//      strokeColor : "rgba(151,187,205,1)",
 //     pointColor : "rgba(151,187,205,1)",
 //     pointStrokeColor : "#fff",
 //     data : [28,48,40,19,96,27,100]
//    }
  ]  
}
var myRadar = new Chart(document.getElementById("radar").getContext("2d")).Radar(radarChartData,{scaleShowLabels : false, 
pointLabelFontSize : 10,
scaleShowLabels: true,  // 目盛を表示（true/false）
scaleOverride : true, // 目盛の最大値を手動設定（true/false）
scaleSteps : 6, // 目盛の数
scaleStartValue : -1,
scaleStepWidth : 1,
	  });
</script>

１階作ったgoogleレーダーチャート

<canvas id="canvas" width="300px" height="300px">
</canvas>
<img src="http://chart.apis.google.com/chart?cht=r
&amp;chxt=x,y
&amp;chds=0,5
&amp;chls=2,1,0
&amp;chco=2EA7E0
&amp;chxr=1,0,5,1
&amp;chd=t:4,3,2,1,0,1,2,3,4,4,4,4
&amp;chm=B,2EA7E050,0,0,0|s,2EA7E0,0,-1,4,0
&amp;chxl=0:|感動|笑い|ほっこり|驚き|LOVE|女性的|戦い|かっこいい|ミステリアス|飽きない|展開速度
&amp;chxs=0,666666,13|1,666666,15

&amp;chts=000000,18,c
&amp;chs=340x340"

style="margin-left:0px;"/>
<!--&amp;chtt=レビュー||-->

<script type="text/javascript">
jQuery( function() {
	jQuery( '.dvideo_img' ) .hover(
	function(){
		jQuery( ".dvideo_star").stop(). animate({opacity: 'show',},{duration: 500,easing: 'swing',})
		},
		
	function(){
		jQuery( ".dvideo_star").stop(). animate({opacity: 'hide',},{duration: 500,easing: 'swing',})
		})
	
	} );
</script>

htmlコード

<div class="dvideo">
<div class="dvideo_img">
<img src="/img/60474568.jpg" width="160">
<div class="dvideo_star">
<img src="/img/stars/6.png" width="160" height="34">
</div>
</div>
<div class="dvideo_title">
最強のふたり
</div>
</div class="dvideo">

css

/*VIDEO*/
.dvideo{
	float: left;
	margin-right: 5px;
}
.dvideo_img{
	position: relative;
}
/*.dvideo_img:hover .dvideo_star{ display:inline-block}*/

.dvideo_star{
	position: absolute;
	left: 0px;
	bottom: 0px;
	display:none;
}
.dvideo_title{
	font-size: 12px;
}

参考
jQuery の animate で、透明⇔不透明のアニメーション動作
ソースを見るから見ると分かりやすい。
http://alphasis.info/2011/05/jquery-animate-opacity/

マウスオーバーアニメーションの基本型
http://www.webopixel.net/javascript/179.html

これはhoverだけではなく、他のアニメーションでも有効です。意図せず連続してアニメーションしてしまうときに試してみてください。
http://logic-a.com/2012/05/14/jquery_hover_event_crazy_animation_stopper/