Help us understand the problem. What is going on with this article?

Chart.jsで遊んでみた

折れ線グラフも棒グラフも自由自在!

chart.html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
  </head>

  <body>
    <canvas id="myChart"></canvas>
    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
            // The type of chart we want to create
            type: 'horizontalBar', //bar 棒グラフ、line 折れ線グラフ、horizontalBar 横の棒グラフ

            // The data for our dataset
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June'],
                datasets: [{
                    label: '@NJ',
                    data: [80, 50, 60, 40, 30, 150],
                    backgroundColor: 'skyblue',
                    borderColor: 'blue',
                    borderWidth: 0,
                    fill: false,
                    pointStyle: 'rect'
                },{
                    label: '@haruka',
                    data: [100, 100, 40, 50, 30, 100],
                    // borderColor: 'blue',
                    // borderWidth: 5,
                    backgroundColor: [
                      'hsla(90, 60%, 60%, 0.3)',
                      'hsla(180, 60%, 60%, 0.3)',
                      'hsla(270, 60%, 60%, 0.3)',
                      'hsla(360, 60%, 60%, 0.3)',
                      'hsla(0, 60%, 60%, 0.3)',
                      'hsla(80, 60%, 60%, 0.3)',
                    ],
                    lineTension: 0,
                    pointStyle: 'triangle'
                }]
            },

            // Configuration options go here
            options: {
              // scales: {
              //   yAxes: [{
              //     ticks: {
              //       // min: 0,
              //       // max:100
              //       suggestedMin: 0,
              //       suggestedMax: 100,
              //       stepSize: 10,
              //       callback: function(value, index, values){
              //         return 'JPY'+ value;
              //         }
              //     }
              //   }]
              // },

              //積み上げ棒グラフ
              scales:{
                xAxes: [{
                  stacked: true
                }],
                yAxes: [{
                  stacked: true
                }]
              },
              title: {
                display: true,
                text: 'Annual Sales',
                fontSize: 18,
                position:'left'
              },
              animation: {
                duration: 0
              },
              legend:{
                // position: 'right'
                // display: false
              }
            }
        });
        var myLineChart = new Chart(ctx, {
            type: type,
            data: data,
            options: options
        });
        </script>
  </body>
</html>

結果は以下の図の通り。最初は折れ線グラフで作ったり枠の色変えたり
縦の棒グラフ作ってたりしたから不要なコードも沢山あります。
(//でコメントにしてるよ)
image.png

折れ線グラフ

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>my Chart</title>
</head>
<body>
  <canvas id ="my_chart">
    Canvas not supported...
  </canvas>
  <script
  src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

  <script>
      'use strict';

      var type = 'line';

      var data = {
        labels: [2010, 2011, 2012, 2013],
        datasets: [{
          label: '@haruka',
          data: [120, 130, 140, 150]
        }, {
          label: '@koji',
          data: [180, 200, 150, 300]
        }]
      };
      var options; 
      var ctx = document.getElementById('my_chart').getContext('2d');
      var myChart = new Chart(ctx, {
        type: type,
        data: data,
        options: options
      });
  </script>
</body>
</html> 
haruka1008
プログラミング初心者ですが学ぶ意欲あり。
tsfcm
SDGsにコードで挑む。社会派エンジニア養成スクール
https://tsfcm.connpass.com/?gmem=1
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away