Tag: chart.js

chartjs_20190517a

https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369 より

折れ線グラフ

<h1>折れ線グラフ</h1>
  <canvas id="myLineChart" style="height:800px;"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
 
  <script>
  var ctx = document.getElementById("myLineChart");
var dataS = '8/1,36.6,84:2,36.7,90:3,36.8,87:4,36.6,88:'
                  + '5,36.7,92:6,36.6,81:7,36.6,85';
 
  var data_l = [];
  var data_1 = [];
  var data_2 = [];
 
var data = dataS.split(":");
 for(let i=0;i<data.length; i++) {
   f = data[i].split(",");
   data_l[i] = f[0];
   data_1[i] = f[1] * 1;
   data_2[i] = f[2] * 1;
}
 
 
 
  var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: data_l,
      datasets: [
        {
          label: '体温(度）',
          data: data_1,
          yAxisID: "y-axis-1",
          borderColor: "rgba(255,0,0,1)",
          backgroundColor: "rgba(0,0,0,0)"
        },
        {
          label: '脈拍(回/分）',
          data: data_2,
          yAxisID: "y-axis-2",
          borderColor: "rgba(0,0,255,1)",
          backgroundColor: "rgba(0,0,0,0)"
        }
      ],
    },
    options: {
      title: {
        display: true,
        text: '8月1日~8月7日'
      },
      scales: {
        yAxes: [{
          id: "y-axis-1",
          position: "left",
          ticks: {
            suggestedMax: 39,
            suggestedMin: 36,
            stepSize: 1,
            callback: function(value, index, values){
                return  value +  ''
            }
          }
        },{
            id: "y-axis-2",
            type: "linear", 
            position: "right",
            ticks: {
                max: 100,
                min: 60,
                stepSize: 10
            }
       }]
      },
    }
  });
  </script>
}