グラフにちょっとした動きを加えたアニメーション

円グラフや棒グラフにちょっとした動きをつけて、見応え良くしてみました。

<ul>
<li class=”clearfix”><!– chart1 –>
<h3> グラフタイトルです </h3>
<div class=”chart”><canvas id=”myChart” class=”vol_contents_chart” width=”350″ height=”350″></canvas></div>
<ul class=” chart chart-lg1″>
<li> テストテスト 30.0% </li>
<li> 項目テスト 10.0% </li>
<li> サンプル項目 20.0% </li>
<li> ダミー項目 15.0% </li>
<li> ダミーダミー 15.0% </li>
<li> サンプルです 10.0% </li>
</ul>
</li><!– chart1 end –>

<li class=”clearfix”><!– chart2 –>
<h3> グラフタイトル２ </h3>
<div class=”chart”><canvas id=”myChart2″ class=”vol_contents_chart” width=”350″ height=”350″></canvas></div>
<ul class=” chart chart-lg2″>
<li> 19歳以下 1% </li>
<li> 20～21歳 6% </li>
<li> 22～23歳 15% </li>
<li> 24～25歳 27% </li>
<li> 26～27歳 24% </li>
<li> 28歳以上 26% </li>
</ul>
</li><!– chart2 end –>

<li class=”clearfix”><!– bar1 –>
<h3> 棒グラフタイトル </h3>
<div class=”chart_bar clearfix”>
<div class=”bar clearfix” id=”bar1″></div>
</div>
</li><!– bar1 end –>
<li class=”clearfix”><!– bar2 –>
<h3> グラフタイトルグラフタイトル </h3>
<div class=”chart_bar clearfix”>
<div class=”bar clearfix” id=”bar2″></div>
</div>
</li><!– bar2 end –>
</ul>

<script>
// ===================================
// donut-Chart1
// ===================================
var data = [
{ color: “#ff9099″, label: ” ここがグラフ “,value: 30.0 },
{ color: “#f8a6d0″, label: ” ダミーダミー “,value: 10.0 },
{ color: “#ff7ea1″, label: ” ダミーダミー “,value: 20.0 },
{ color: “#e883ad”, label: ” ダミーダミー “,value: 15.0 },
{ color: “#fb8ebb”, label: ” ダミーダミー “,value: 15.0 },
{ color: “#f7a28a”, label: ” ダミーダミー “,value: 10.0 },
/*{ color: “#f1da66″, label: ” “,value: 0 },
{ color: “#f6b486″, label: ” “,value: 0 },
{ color: “#f7cb88″, label: ” “,value: 0 },
{ color: “#d6d95e”, label: ” “,value: 0 },
{ color: “#d6d95e”, label: ” “,value: 0 },
{ color: “#6edab8″, label: ” “,value: 0 },
{ color: “#7ac3c6″, label: ” “,value: 0 },
{ color: “#b5ccde”, label: ” “,value: 0 },
{ color: “#95cad5″, label: ” “,value: 0 },
{ color: “#9cd799″, label: ” “,value: 0 },
{ color: “#7ad4e3″, label: ” “,value: 0 },
{ color: “#60c2e6″, label: ” “,value: 0 },
{ color: “#8ddbd8″, label: ” “,value: 0 },
{ color: “#42cfe3″, label: ” “,value: 0 },
{ color: “#77b3e3″, label: ” “,value: 0 }*/
];
var ctx = document.getElementById(“myChart”).getContext(“2d”);
new Chart(ctx).Doughnut(data,{
segmentShowStroke : true,
segmentStrokecolor: “#fff”,
segmentStrokeWidth : 1,
percentageInnerCutout : 40, // **** Border width
animation : true,
animationSteps : 100,
animationEasing : “easeOutBounce”,
animateRotate : true,
animateScale : false,
onAnimationComplete : null
});

// ===================================
// donut-Chart2
// ===================================
var data = [
{ color: “#77b3e3″, label: ” 19歳以下 “,value: 0.8 },
{ color: “#42cfe3″, label: ” 20～21歳 “,value: 6.3 },
{ color: “#8ddbd8″, label: ” 22～23歳 “,value: 15.4 },
{ color: “#60c2e6″, label: ” 24～25歳 “,value: 27.2 },
{ color: “#7ad4e3″, label: ” 26～27歳 “,value: 24.1 },
{ color: “#9cd799″, label: ” 28歳以上 “,value: 26.1 },
/*{ color: “#95cad5″, label: ” “,value: 0 },
{ color: “#b5ccde”, label: ” “,value: 0 },
{ color: “#00BDC4″, label: ” “,value: 0 },
{ color: “#6edab8″, label: ” “,value: 0 },
{ color: “#d6d95e”, label: ” “,value: 0 },
{ color: “#f7cb88″, label: ” “,value: 0 },
{ color: “#f6b486″, label: ” “,value: 0 },
{ color: “#f1da66″, label: ” “,value: 0 },
{ color: “#f7a28a”, label: ” “,value: 0 },
{ color: “#fb8ebb”, label: ” “,value: 0 },
{ color: “#e883ad”, label: ” “,value: 0 },
{ color: “#ff7ea1″, label: ” “,value: 0 },
{ color: “#f8a6d0″, label: ” “,value: 0 },
{ color: “#ff9099″, label: ” “,value: 0 }*/
];
var ctx = document.getElementById(“myChart2”).getContext(“2d”);
new Chart(ctx).Doughnut(data,{
segmentShowStroke : true,
segmentStrokecolor: “#fff”,
segmentStrokeWidth : 1,
percentageInnerCutout : 40, // **** Border width
animation : true,
animationSteps : 100,
animationEasing : “easeOutBounce”,
animateRotate : true,
animateScale : false,
onAnimationComplete : null
});

// ===================================
// bar-Chart1,2
// ===================================
google.load(“visualization”, “1”, {packages:[“corechart”]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data3 = google.visualization.arrayToDataTable([
[‘Element’, ‘％’, { role: ‘style’ }],
[‘ サンプルサンプル ‘, 50.5 , ‘ #ff9099 ‘],
[‘ アンケート結果 ‘, 41.5 , ‘ #f6b486 ‘],
[‘ 大阪府 ‘, 35.3 , ‘ #ff9099 ‘],
[‘ 東京都 ‘, 5.9 , ‘ #f6b486 ‘],
[‘ 京都府 ‘, 14.9 , ‘ #ff9099 ‘],
]);
var data4 = google.visualization.arrayToDataTable([
[‘Element’, ‘％’, { role: ‘style’ }],
[‘ サンプルサンプル ‘, 22.3 , ‘ #77b3e3 ‘],
[‘ サンプルサンプル ‘, 41.1 , ‘ #8ddbd8 ‘],
[‘ サンプルサンプル ‘, 20.0 , ‘ #77b3e3 ‘],
[‘ サンプルサンプル ‘, 11.2 , ‘ #8ddbd8 ‘],
[‘ サンプルサンプル ‘, 5.5 , ‘ #77b3e3 ‘],
]);

var options = {
showTextEvery:true,
backgroundColor: ‘none’ ,
hAxis: {
viewWindowMode: ‘pretty’,
textPosition:’out’,
},
vAxis: {
viewWindowMode: ‘pretty’,
textPosition:’in’,
textStyle: {color: ‘#333’, fontName: ‘Arial Black’,fontSize: 16},
},
bar: {groupWidth: “80%” },
legend: { position: “none” },
};

var chart = new google.visualization.BarChart(document.getElementById(‘bar1’));
chart.draw(data3, options);

var chart = new google.visualization.BarChart(document.getElementById(‘bar2’));
chart.draw(data4, options);

}
</script>

これを改変していくだけで、円グラフの割合や、数値、色などが変更できます。

サンプルです!