テスト

by SAiTO TOSHiKi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<div class="container"></div>

<script>
  window.chartColors = {
    red: 'rgb(255, 99, 132)',
    orange: 'rgb(255, 159, 64)',
    yellow: 'rgb(255, 205, 86)',
    green: 'rgb(75, 192, 192)',
    blue: 'rgb(54, 162, 235)',
    purple: 'rgb(153, 102, 255)',
    grey: 'rgb(231,233,237)'
  };

  window.randomScalingFactor = function() {
    return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
  };

</script>

CSS

canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.chart-container {
  width: 500px;
  margin-left: 40px;
  margin-right: 40px;
  margin-bottom: 40px;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

JavaScript

//　最後のチャートの　左上の１００が　００になる問題
//　chart v2.4.0 では発生しない。
//　2016-12/18 現在の最新コードで発生？



function createConfig(gridlines, title) {
  return {
    type: 'line',
    data: {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [{
        label: "My First dataset",
        backgroundColor: window.chartColors.red,
        borderColor: window.chartColors.red,
        data: [10, 30, 39, 20, 25, 34, 0],
        fill: false,
      }, {
        label: "My Second dataset",
        fill: false,
        backgroundColor: window.chartColors.blue,
        borderColor: window.chartColors.blue,
        data: [18, 33, 22, 19, 11, 39, 30],
      }]
    },
    options: {
      responsive: true,
      title: {
        display: true,
        text: title
      },
      scales: {
        xAxes: [{
          gridLines: gridlines
        }],
        yAxes: [{
          gridLines: gridlines,
          ticks: {
            min: 0,
            max: 100,
            stepSize: 10
          }
        }]
      }
    }
  };
}

//window.onload = function() {
  var container = document.querySelector('.container');

  [{
    title: 'Display: true',
    gridLines: {
      display: true
    }
  }, {
    title: 'Display: false',
    gridLines: {
      display: false
    }
  }, {
    title: 'Display: false, no border',
    gridLines: {
      display: false,
      drawBorder: false
    }
  }, {
    title: 'DrawOnChartArea: false',
    gridLines: {
      display: true,
      drawBorder: true,
      drawOnChartArea: false,
    }
  }, {
    title: 'DrawTicks: false',
    gridLines: {
      display: true,
      drawBorder: true,
      drawOnChartArea: true,
      drawTicks: false,
    }
  }].forEach(function(details) {
    var div = document.createElement('div');
    div.classList.add('chart-container');

    var canvas = document.createElement('canvas');
    div.appendChild(canvas);
    container.appendChild(div);

    var ctx = canvas.getContext('2d');
    var config =...