白あんapp配信中 詳しくはこちらから

グラフのテンプレート

スポンサーリンク

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

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

フッターインサートに該当ページの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種類グラフの描画方法を紹介し...
Chart.jsでグラフを描画してみた 2 - Qiita
#1. はじめに この記事は、以前に投稿した記事 ( の続きになります。...
トップへ戻る
タイトルとURLをコピーしました