<Javascript>グラフ書いてみようかと思った

書き出し一行目で言うことじゃないと思うけどめちゃめちゃ眠い

JavaScriptでグラフを書く

今回はこんなことをやるのでメモを書きます。
このネタは多分複数回に分けて書いていきます。

目次

  1. 使うもの
  2. どうやって使うか
  3. 折れ線でのサンプル
  4. 今後の予定

1.使うもの

今回はchart.jsというフレームワークを使ってグラフを作っていきます。
chart.js
日本語ドキュメントはこちら

このフレームワークでできること

もちろんグラフが書けます。

  • 棒グラフ
  • 線グラフ
  • レーダーチャート
  • ドーナツ、円グラフ
  • 鶏頭図
  • バブルチャート
  • 散布図
  • 面グラフ

このぐらいいろいろグラフが書けます。
複数をただかけるだけじゃなく、そのグラフを組み合わせることも可能です。

2.どうやって使うか

ダウンロードしたやつを使う方法もあるんですが今回はCDNを引いて使いました。

<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>

あとはこれを使って実際にグラフを書いていきます。
書くときには描写するエリアを指定する必要があります。

<canvas id="hogehoge" width="" height=""></canvas>

この2つを使いつつ次はまず折れ線グラフを作ってみます。

3.折れ線グラフでのサンプル

ここまでやったならとりあえず実際にグラフ出したくねってなるので出してみます。
今回はサンプルコードを調べてみて、その上でデータとか大きさとかをちょっといじってみたくらいのコードを載せます。
(詳しいことは今後書きます。chart.jsは研究で今後使うと思ってるので自分のためにも書くと思ってます。hi)

htmlのコード

htmlに関してはさっき上で書いたcanvas要素を書くだけです。

<canvas id="myChart" width="5" height="2.5"></canvas>

シンプル
width,heightはpx単位ではなくchart.js独自のものっぽいです。
詳細はいろいろいじってみればいい感じになるって感じです。

JavaScriptのコード

JavaScriptのコードについてはコメントに色々書いてるのでまずはコードから。

//対象のidを指定してchartオブジェクトを作る
new Chart(document.getElementById("myChart"), {
  //折れ線グラフを指定
  "type": "line",
  //使用するデータを記述
  "data": {
    //横軸ラベルの指定
    "labels": ["00", "10", "20", "30", "40", "50", "60"],
    //データの情報
    "datasets": [{
        //データのラベル
        "label": "data sample",
        //実際のデータ(jsonデータ等に入れ替え)
        "data": [5, 6, 8, 20, 21, 30, 27],
        //塗りつぶし(しない)
        "fill": false,
        //線の色を指定(RGB)
        "borderColor": "rgb(75, 192, 192)",
        //線の湾曲を指定
        "lineTension": 0.0
      }]
    },
  "options": {}
});

実際に作成されるグラフ

それをやるとこんなグラフができます f:id:poolbooyer:20181017103622p:plain 実際に表示できるアニメーションとかもいろいろいじれるので面白いです。

4.今後の予定

  • 大きさに関する詳細を調べる
  • 複数表示のテスト
  • サーバの情報を持ってきてグラフ書く

を中心に色々いじってみようかなと思っています。

参考

chart.js
日本語ドキュメント

<JavaScript>クリップボードにコピーするボタン作ってみた

クリップボードにコピーできるものを作ってみた

今回はテキストをクリップボードに書き込むやつを作ってみました。
なんでかって言うと特に深い理由はありません。
やってみたかっただけです。

目次

  1. 使うフレームワーク
  2. 実際に作ってみたコード
  3. 参考資料

1.使うフレームワーク

今回使うフレームワークはこんなものです。
clipboardjs
これを使うことで簡単にクリップボードにコピーするのを容易にする事ができるって感じです。

2.実際に作ってみたコード

2.1 必ずやること

  • scriptの呼び出し

以下のコードを使って呼び出します。

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>

これに関しては定型文だと思って使えばいいかなって感じです。

2.2 実験用に作成したhtmlの概要

  • 入力するフォームを作る

今回はサンプルとして、入力フォームに入っている文字列をコピーする機能を実装してみます。
ということでまずはフォームを作ります。
コピーするところを1つに指定できないといけないので対象のタグにはid属性を付けます。

<input id="text" type="text">

うーん、そのまんまって感じ。
ひねりもクソもないですね。

  • コピーするためのボタンを作る 実際にコピーするためのボタンを作ります。
    まずはコードから
<button id="cp" data-clipboard-target="#text">copy</button>

とりあえず1つに定まっててほしいのでidをつけます。
また、clipboardにわたすところのidを属性に記述する必要があるので"data-clipboard-target"にそのidを記述します。(今回だと#text)

2.3 実験用に作成したJSの概要

2.3.1 単純にクリップボードにコピー

まずはコピーしてみます。
単純にコピーするためのコードは下のようになります。

<script type="application/javascript">
  var clipboard = new Clipboard('#cp');
  clipboard.on('success', function(e) {
     e.clearSelection();
  });
</script>

このコードでは#cpをクリックするとクリップボードにコピーするオブジェクトを作成して、コピーを行います。
実際にコピーが成功すると選択を解除することのできるようにしてあります。
また、実行結果のステータスメッセージが成功のときは選択を解除するようにしておくといいみたいです。

2.3.2 コピーしてフォームを空にする(cutする)

inputタグと、textareaタグについてはフォームの中身を切り取りすることも可能です。
切り取りをするときには以下のようにボタンのコードを修正することで可能になります。

<button id="ct" data-clipboard-action="cut" data-clipboard-target="#text">cut</button>

data-clipboard-action属性にcutを指定することで、切り取りをすることが可能になります。

3.参考資料

<bootstrap>cardを使っていい感じに見えるようにする

(連続してますがbootstrapネタ) (重ねていいますが、ざっくり記述する予定です)

cardを使った見やすくする方法

このエントリを書いた背景

  • cardコンポーネントの大まかな使い方をまとめて見れるようにしたい
  • カスタムするときにどうしたらいいかの参考にしたい

    そもそもcardコンポーネントで何ができる

  • ざっくりいうと見た目を美しくできる

  • 属性ごとに情報を分けて表示できる

cardコンポーネントの使い方

基本の使い方

基本的なコードの書き方はこんな感じ

<div class="card">
  <div class="card-body">
    <div class="card-title">
      <h5>card sample</h5>
    </div>
    <div class="card-text">
      <p>This is a card sample.</p>
    </div>
  </div>
</div>

f:id:poolbooyer:20181003133921p:plain

複数のカードを並べる

複数のカードを並べるときは個々のカードをcard-groupクラスでくくることでまとめて扱えます。2つのときのサンプルを下の方にかきました。

<div class="card-group">
  <div class="card">
    <div class="card-body">
      <div class="card-title">
        <h5>card sample</h5>
      </div>
      <div class="card-text">
        <p>This is a card sample.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <div class="card-title">
        <h5>card sample</h5>
      </div>
      <div class="card-text">
        <p>This is a card sample.</p>
      </div>
    </div>
  </div>
</div>

f:id:poolbooyer:20181003135209p:plain gorupにすると横の隙間がなく、ビッタリ並んで配置されるんですがgroupの部分をdeckにすると隙間を持って並べられます。

<div class="card-deck">
  <div class="card">
    <div class="card-body">
      <div class="card-title">
        <h5>card sample</h5>
      </div>
      <div class="card-text">
        <p>This is a card sample.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <div class="card-title">
        <h5>card sample</h5>
      </div>
      <div class="card-text">
        <p>This is a card sample.</p>
      </div>
    </div>
  </div>
</div>

f:id:poolbooyer:20181003141121p:plain

カード内の見た目を整える

タイトルを強調する

カードのタイトルになる部分を表示する方法としてはcard-headerクラスでヘッダーにする文を囲むとヘッダー表示ができます

<div class="card">
  <div class="card-header">
    <p>This is card header.</p>
  </div>
  <div class="card-body">
    <div class="card-title">
      <h5>card sample</h5>
    </div>
    <div class="card-text">
      <p>This is a card sample.</p>
    </div>
  </div>
</div>

f:id:poolbooyer:20181003142038p:plain

カードの中身を中央寄せにする

カードの中身を全部中央寄せにすることもできます。

<div class="card text-center">
  <div class="card-header">
    <p>This is text-center.</p>
  </div>
  <div class="card-body">
    <div class="card-title">
      <h5>card sample</h5>
    </div>
    <div class="card-text">
      <p>This is a card sample.</p>
    </div>
  </div>
</div>

f:id:poolbooyer:20181004003542p:plain

カードの幅を変える

style属性にwidthを記述してサイズ変更できます。 ここのサンプルは省略

参考資料

getbootstrap.com