白あん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. はじめに この記事は、以前に投稿した記事 ( の続きになります。...
テンプレート

Amazonコイン割引金額早見表

※コインの数字タップで各Amazonコインのページに飛びます

コイン 値段 割引率
50,000コイン 40,000円 20%
10,000コイン 8,200円 18%
5,000コイン 4,250円 15%
2,500コイン 2,250円 10%
1,000コイン 910円 9%
500コイン 490円 2%
シェアをお願いします
白あんをフォローしましょう。
白あんappどうどすえ

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

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

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

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

プレミアム抱き枕カバー ルウシェ セット
ルウシェ 抱き枕カバー

商品名:白猫プロジェクト プレミアム抱き枕カバー ルウシェ セット

販売価格:¥16,280(税込)

発売日:2020年3月予定
※製造の都合により前後する場合がございます。

受注期間:2019年12月11日(水)〜2019年12月25日(水)

商品内容:抱き枕カバー/1点
     ドラマCD/1点

サイズ:縦約160cm×横約50cm

素材:ライクトロン(2wayトリコット)

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

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

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

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

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