概要
chart.jsで棒グラフを表示する
詳細
chart.jsで棒グラフを表示します
仕様
・CodeIQで出題しているデスマコロシアムの言語の分布を表示
・前日、当日の差分を確認できるようにする
サンプル
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="Chart.min.js"></script> <script language="JavaScript"><!-- function displayPieChart() { var barChartData = { labels : ['Ada', 'Assembler (gcc-4.8.1)', 'Assembler (nasm-2.10.01)', 'AWK (gawk)', 'AWK (mawk)', 'Bash', 'bc', 'Brainf**k', 'C', 'C#', 'C++ 4.3.2', 'C++ 4.8.1', 'C++11', 'C99 strict', 'CLIPS', 'Clojure', 'COBOL', 'COBOL 85', 'Common Lisp (clisp)', 'D (dmd)', 'Erlang', 'F#', 'Factor', 'Falcon', 'Forth', 'Fortran', 'Go', 'Groovy', 'Haskell', 'Icon', 'Intercal', 'Java', 'Java7', 'JavaScript (rhino)', 'JavaScript (spidermonkey)', 'Lua', 'Nemerle', 'Nice', 'Nimrod', 'Node.js', 'Objective-C', 'Ocaml', 'Octave', 'Oz', 'PARI/GP', 'Pascal (fpc)', 'Pascal (gpc)', 'Perl', 'Perl 6', 'PHP', 'Pike', 'Prolog (gnu)', 'Prolog (swi)', 'Python', 'Python 3', 'R', 'Ruby', 'Scala', 'Scheme (guile)', 'Smalltalk', 'SQL', 'Tcl', 'Unlambda', 'VB.NET', 'Whitespace'], datasets : [ { fillColor : "red", strokeColor : "red", data : [1, 1, 1, 1, 2, 4, 0, 2, 6, 3, 2, 1, 2, 0, 0, 4, 1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 4, 1, 3, 1, 1, 10, 2, 1, 1, 4, 1, 0, 0, 1, 2, 1, 1, 1, 1, 1, 1, 2, 2, 3, 1, 0, 2, 2, 3, 5, 5, 2, 2, 1, 3, 1, 1, 2, 1] }, { fillColor : "blue", strokeColor : "blue", data : [1, 1, 1, 1, 2, 4, 0, 2, 4, 3, 2, 1, 2, 0, 0, 4, 1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 4, 1, 3, 1, 1, 10, 2, 1, 1, 4, 1, 0, 0, 1, 2, 1, 1, 1, 1, 1, 1, 2, 2, 3, 1, 0, 2, 2, 3, 5, 5, 2, 2, 1, 3, 1, 1, 2, 1] }, ] } var options = { scaleOverlay : true, scaleOverride : true, scaleSteps : 12, scaleStepWidth : 1, scaleStartValue : 0, scaleLineColor : "rgba(0, 0, 0, .1)", scaleLineWidth : 1, scaleShowLabels : true, scaleLabel : "<%=value%>人", scaleFontSize : 16, scaleFontStyle : "italic", scaleShowGridLines : true, scaleGridLineColor : "rgba(0, 0, 0, .05)", scaleGridLineWidth : 10, barShowStroke : true, barStrokeWidth : 1, barValueSpacing : 5, barDatasetSpacing : 1, animation : true, animationSteps : 60, animationEasing : "easeOutQuad", onAnimationComplete : null } var chart = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData, options); } --></script> </head> <body onload="displayPieChart();"> <canvas id="canvas" height="800" width="1600"></canvas> </body> </html>