白あん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. はじめに この記事は、以前に投稿した記事 ( の続きになります。...
テンプレート
シェアをお願いします
白あんをフォローしましょう。
白あんappどうどすえ

白あんappについては『白あんapp説明書』をご覧ください

白猫オススメ商品
Amazonコイン

最大20%offでお得にジュエル購入が可能
日々変動するお値段も毎日更新中
詳しくは詳細ページへ♪

※Amazonコインの使用には AndroidまたはKindle FIRE端末、Androidエミュレータ(PC必須)が必要です。

白猫プロジェクト 5th Anniversary Art Collection EC先行予約特典 色紙セット

「白猫プロジェクト」5周年を記念した公式アートブック!
本誌限定描き下ろしイラストや未公開の設定資料をはじめ、背景,エフェクト,モンスターイラストなど、白猫のアートを余す事なく詰め込んだ5周年特別企画商品です。
約360Pにわたり収録した「白猫プロジェクト」5年分の集大成をお届けいたします。

▼コロプラ公式ショップ限定 先行予約特典!白猫開発スタッフ 寄せ書き色紙▼

本誌表紙イラストを担当した白猫メインキャラクターデザイナーをはじめ、
「白猫プロジェクト」を支えてきたクリエーターたちによるお祝いイラストとコメントがA4サイズの色紙一面に掲載された先行予約限定の特典!!
※5月30日〜6月17日までの期間内にご予約いただいた注文が対象となります。

『10』 - colopl 10th Anniversary Illustlation Book 白猫 & 黒猫

「コロプラフェス2018」で販売された、イラストブックの通販が開始!

『魔法使いと黒猫のウィズ』『白猫プロジェクト』を支えてきたデザイナーによる完全描き下ろしの合同イラストブックです

40P以上の描き下ろしにコメントを添えた、コロプラ10周年を記念した特別企画商品!

白猫プロジェクト攻略の『白あん』
タイトルとURLをコピーしました