グラフのテンプレート

Amazonコインのページ　テンプレート

ｃｓｓに追記

/*****
chartを　使ったグラフグラフ
**************************************/


/*グラフの外枠*/

.canv {
  padding-left: 3px;
  padding-bottom: 3px;
  border: 1px solid #333;
  background-color: #fff;
  margin-bottom: 50px;
  border-radius: 7px;
}

１ページ一つしか載せれない

フッターインサートに該当ページのID を入力する。

<div class="canv"><canvas id="myChart4" width="400" height="300"></canvas></div>

<script>
var config = {
   type: 'line',
   data: {
      labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
      datasets: [
        {
            label: "50000コイン",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(219,39,91,0.5)",
            borderColor: "rgba(219,39,91,0.5)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(219,39,91,0.5)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 2,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(219,39,91,0.5)",
            pointHoverBorderColor: "rgba(219,39,91,0.5)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
　　　　　　　borderWidth: 6,
           data:[10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10],
            spanGaps: false,
        },{
            label: "10000コイン",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(130,201,169,0.7)",
            borderColor: "rgba(130,201,169,0.7)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(130,201,169,0.7)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 2,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(130,201,169,0.7)",
            pointHoverBorderColor: "rgba(130,201,169,0.7)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
borderWidth: 6,
               data:[10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10],
            spanGaps: false,

 },{
            label: "5000コイン",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(255,183,76,0.7)",
            borderColor: "rgba(255,183,76,0.7)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(255,183,76,0.7)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 2,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(255,183,76,0.7)",
            pointHoverBorderColor: "rgba(255,183,76,0.7)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,borderWidth: 6,
              data:[10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10],
            spanGaps: false,
       }]
   },
   options: {
      title: {
        display: true,
        text: '5月のAmazonコイン割引率'
      },
      scales: {
xAxes: [{
          ticks: {
            suggestedMax: 31,
            suggestedMin: 1,
            maxTicksLimit: 10,
            fontSize: 12,
            callback: function(value, index, values){
              return  value +  '日'
            }
          }
        }],
        yAxes: [{
          ticks: {
            suggestedMax: 25,
            suggestedMin: 10,
            stepSize: 5,
            callback: function(value, index, values){
              return  value +  '％'
            }
          }
        }]
      },
   }
};

window.onload = function() {
        var ctx = document.getElementById("myChart4").getContext("2d");
        window. myLine = new Chart(ctx, config);
};
</script>

月別表示用テンプレ

ヘッダーにJSを読み込ませる

一つのページにいくつも載せれる

<script>
  var ctx = document.getElementById("myLineChart");
  var myLineChart = new Chart(ctx, {
    type: 'line',
   
      data: {
      labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
      datasets: [
        {
            label: "50000コイン",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(219,39,91,0.5)",
            borderColor: "rgba(219,39,91,0.5)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(219,39,91,0.5)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 2,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(219,39,91,0.5)",
            pointHoverBorderColor: "rgba(219,39,91,0.5)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
　　　　　　　borderWidth: 6,
           data:[10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10],
            spanGaps: false,
        },{
            label: "10000コイン",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(130,201,169,0.7)",
            borderColor: "rgba(130,201,169,0.7)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(130,201,169,0.7)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 2,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(130,201,169,0.7)",
            pointHoverBorderColor: "rgba(130,201,169,0.7)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
borderWidth: 6,
               data:[10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10],
            spanGaps: false,

 },{
            label: "5000コイン",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(255,183,76,0.7)",
            borderColor: "rgba(255,183,76,0.7)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(255,183,76,0.7)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 2,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(255,183,76,0.7)",
            pointHoverBorderColor: "rgba(255,183,76,0.7)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,borderWidth: 6,
              data:[10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10],
            spanGaps: false,
     
 }
      ],
    },
  options: {
      title: {
        display: true,
        text: '5月のAmazonコイン割引率'
      },
      scales: {
xAxes: [{
          ticks: {
            suggestedMax: 31,
            suggestedMin: 1,
            maxTicksLimit: 10,
            fontSize: 12,
            callback: function(value, index, values){
              return  value +  '日'
            }
          }
        }],
        yAxes: [{
          ticks: {
            suggestedMax: 25,
            suggestedMin: 10,
            stepSize: 5,
            callback: function(value, index, values){
              return  value +  '％'
            }
          }
        }]
      },
    }
  });
  </script>

<div class="canv"><canvas id="myLineChart" width="400" height="300"></canvas></div>

その他グラフ

Chart.jsでグラフを描画してみた - Qiita

1. はじめにChart.jsを使用すると、簡単に、綺麗なグラフを描画することができます。公式ホームページ今回は、特に使用頻度の高そうな、以下5…

qiita.com

Chart.jsでグラフを描画してみた ２ - Qiita

1. はじめにこの記事は、以前に投稿した記事 (…

qiita.com