<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<a href="javascript:void(0);" class="trigger" id="trigger04">▼ブラウザ別の訪問数のグラフを表示する(クリックで表示)▼</a>
<div class="clearfix">
<div class="group">
<div class="graph" id="canvas04_wrap">
</div>
<div class="text" id="canvas04_desc">
<figure id="canvas04_img_wrap"></figure>
<p>国内のブラウザはまだまだIEが主流ですが、WebNAUTユーザーの方々にはChromeが一番人気のようです。2位にiOSアプリでの閲覧を主に示すSafari(in-app)が入っていることにも注目です。</p>
</div>
</div>
</div>
body {
text-align: center;
width: 540px;
margin: 20px auto;
padding: 0 10px;
a.trigger {
display: inline-block;
color: #fff !important;
background-color: rgba(32,186,238,1);
border-radius: 8px;
padding: 5px 20px;
text-align: center;
margin-bottom: 10px;
}
#canvas04_wrap {
display: inline-block;
clear: both;
}
#canvas04_img_wrap {
position: relative;
margin-left: -20px;
}
#canvas04_desc {
display: inline-block;
text-align: left;
}
}
View Compiled
$(function(){
/*save objects*/
var canvas = {
"canvas02" : null
}
var colors = {
"01a" : "rgba(10,25,215,1)",
"01b" : "rgba(32,186,238,1)",
"02a" : "rgba(245,70,53,1)",
"02b" : "rgba(255,241,0,1)",
"02c" : "rgba(215,10,25,0.2)",
"03a" : "rgba(32,186,238,0.5)",
"03b" : "rgba(245,70,53,0.5)",
"04a" : "rgba(215,215,215,1)",
"05a" : "rgba(245,70,53,0.8)",
"05b" : "rgba(255,241,0,0.5)",
}
/*
@CANVAS
drawing graphs
augument : canvas要素のidの連番、グラフの種類、chart.jsに渡す引数のオブジェクトを格納した配列
戻り値:なし
*/
function CANVAS(_SET){
var vals = null;
var descId = "";
var options = null;
fire = (function(_SET){
if(_SET.id){
descId = _SET.id;
}
if(_SET.vals){
vals = _SET.vals;
}
if(_SET.options){
options = _SET.options;
}
var canvas = document.getElementById(_SET.id).getContext("2d");
if(_SET.type){
switch(_SET.type){
case "Doughnut":
var draw = new Chart(canvas).Doughnut(vals,options);
break;
case "Bar":
var draw = new Chart(canvas).Bar(vals,options);
break;
case "Line":
var draw = new Chart(canvas).Line(vals,options);
break;
case "Radar":
var draw = new Chart(canvas).Radar(vals,options);
break;
case "PolarArea":
var draw = new Chart(canvas).PolarArea(vals,options);
break;
case "Pie":
var draw = new Chart(canvas).Pie(vals,options);
break;
default : return false;
break;
}
}
})(_SET);
};
function start(_SET){
canvas["canvas"+_SET.id] = new CANVAS(_SET);
}
/*
on window.load
*/
$(function(){
$("div.text").css("opacity","0");
var insertObj04 = $("<canvas>").attr({
"id" : "canvas04",
"width" : 400,
"height" : 330
});
$("#canvas04_wrap").append(insertObj04);
var insertObj05 = $("<img>").attr({
"src" : "http://webnaut.jp/develop/img/img_develop_140203_02_b.png",
"alt" : "ブラウザ別の訪問数 サンプル"
});
$("#canvas04_img_wrap").append(insertObj05);
});
/*
trigger
*/
$("#trigger04").on("click",
function(){
var _SET = {
id : "canvas04",
type : "Doughnut",
vals : [
{
value: 36,
color: colors["01b"]
},
{
value: 18,
color: colors["02a"]
},
{
value: 17,
color: colors["02b"]
},
{
value: 13,
color: colors["03a"]
},
{
value: 9,
color: colors["03b"]
},
{
value: 8,
color: colors["04a"]
}/*,
{
value: 2,
color: colors["04a"]
}*/
],
options : {
animationSteps : 100,
onAnimationComplete : function(){
$("#"+_SET.id+"_desc").animate({
"opacity" : 1
},600,"linear");
}
}
}
start(_SET);
}
);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.