Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

JavaScript | chart.jsで棒グラフを表示する

概要

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>

画像