PlusOne Blog

「JavaScript」に関する記事

【JavaScript】手書き風グラフⅡ③

今回は、前回に続く”jsライブラリ「rawViz.js」の紹介の続きです。
前回は、基本的な記述法について説明しましたが、今回から、個々のフラフの種類の記述方法について紹介していきます。
 
今回は
 ・円グラフ(ドーナツ状)
 ・円グラフ(パイ状)
の2つについて、紹介していきます。
 
 

円グラフ(ドーナツ状)

 

new roughViz.Donut({
   element: '.viz',
   data: {labels: ['a', 'b'], values: [10, 20]}
})

ラベルとデータは必須で上記のように記述します。
下記のとおりオプションがありますので、使いかたによってオプションを設定します。
 

 

 
 

円グラフ(パイ状)

 

new roughViz.BarH({
   element: '.viz',
   data: {labels: ['a', 'b'], values: [10, 20]}
})

ラベルとデータは必須で上記のように記述します。
下記のとおりオプションがありますので、使いかたによってオプションを設定します。
 

 

この記事を読む

【JavaScript】手書き風グラフⅡ②

今回は、前回に続く”jsライブラリ「rawViz.js」の紹介の続きです。
前回は、基本的な記述法について説明しましたが、今回から、個々のフラフの種類の記述方法について紹介していきます。
 
今回は
 ・棒グラフ(縦)
 ・棒グラフ(横)
の2つについて、紹介していきます。
 
 

棒グラフ(縦)

 

new roughViz.Bar({
   element: '.viz',
   data: {labels: ['a', 'b'], values: [10, 20]}
})

ラベルとデータは必須で上記のように記述します。
下記のとおりオプションがありますので、使いかたによってオプションを設定します。
 

 

 
 

棒グラフ(横)

 

new roughViz.BarH({
   element: '.viz',
   data: {labels: ['a', 'b'], values: [10, 20]}
})

ラベルとデータは必須で上記のように記述します。
下記のとおりオプションがありますので、使いかたによってオプションを設定します。
 

 

この記事を読む

【JavaScript】手書き風グラフⅡ①

今回は、”色々な種類”の手書き風のグラフを作成するjsライブラリ「rawViz.js」を紹介します。
手書きで可愛いグラフが描画できますので、ちょっとしたアクセントに良いと思います。
 
 

ライブラリの読込

 

   <script src="https://unpkg.com/rough-viz@1.0.6"></script>

 

HTMLの記述

 

DIVタグを準備

   <div id="viz"></div>

 

JSの記述

 

new roughViz.Donut({
  element: "#viz",
  data: {
    labels: ["a", "b", "c"],
    values: [20, 10, 5]
  },
  colors: ["#0bd", "#fc2", "#f99"]
});

 

手書きグラフ

 

 

この記事を読む

【JavaScript】手書き風マーカや強調、囲いなど

今回は、手書き風のマーカや強調、囲いなどを作成するjsライブラリ「Rough Notation」(WEBサイトGitHub)を紹介します。
サイトの中で、ワンポイントのアクセントに使用するとイイ感じになると思います。
 
 

jsの実装

「annotation注釈 を付ける要素」と「注釈スタイルを記述する構成」を渡してオブジェクトを作成します。
注釈オブジェクトを取得したら、それを呼び出しshow()て注釈を表示できます。
 

 <script type="module">
  import { annotate } from "https://unpkg.com/rough-notation?module";

  const e = document.querySelector('#myElement');
  const annotation = annotate(e, { type: 'underline' });
  annotation.show();
 </script>

 
OPTIONのプロパティ
 
 type
  装飾の種類を指定
  ・underline: アンダーライン
  ・box: ボックスで囲う
  ・circle: 円で囲う
  ・highlight: 蛍光ペンでマークされてようにマーカを引く
  ・strike-through: 取り消し線を引く
  ・crossed-off: ×マークを書く
  ・bracket: 周りに角かっこを描画 デフォルトでは右側にありますが、左、右、上、下のいずれかまたはすべてに構成できます
 
 animate
  アニメーション効果をつけるかどうかを指定
  デフォルトは true
 
 animationDuration
  アニメーションする時間を指定
  デフォルトは 800ms
 
 color
  装飾の色を指定
  デフォルトは currentColor
 
 strokeWidth
  装飾の線幅を指定
  デフォルトは 1
 
 padding
  要素と装飾の隙間の幅を指定
  上下左右を個別に、[top,right,bottom,left] [top & bottom, left & right] と指定することもできます。
  デフォルトは 5px
 
 multiline
  インライン要素のみ有効
  複数行に装飾するときに true に設定します
 
 iterations
  装飾を描画する際の繰り返し数を設定します
  デフォルトは 2
 
 brackets
  角かっこを装飾する位置を設定します(left, right, top, bottom)
  デフォルトは right
 
 rtl
  左から右へ記載する文章のときに、true を設定します。
 
 
Annotation Group
装飾するオブジェクトをグループ化することにより、描画順を指定することができます。

 <script type="module">
  import { annotate, annotationGroup } from 'rough-notation';

  const a1 = annotate(document.querySelector('#e1'), { type: 'underline' });
  const a2 = annotate(document.querySelector('#e3'), { type: 'box' });
  const a3 = annotate(document.querySelector('#e3'), { type: 'circle' });

  const ag = annotationGroup([a3, a1, a2]);
  ag.show();
 </script>

 

サンプル

 

 

この記事を読む

【JavaScript】手書き風グラフ

今回は、手書き風のグラフを作成するjsライブラリ「CHART.XKCD」を紹介します。
手書きで可愛いグラフが描画できますので、ちょっとしたアクセントに良いと思います。
 
 

ライブラリの読込

 

   <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1/dist/chart.xkcd.min.js"></script>

 

HTMLの記述

 

SVGタグを準備

   <svg class="line-chart"></svg>

 

JSの記述

 

titleでグラフのタイトル、xLabelとyLabelでそれぞれX軸・Y軸のラベル、datasetsでそれぞれのデータをセットします。

const svg = document.querySelector(".line-chart"); 
new chartXkcd.Line(svg, {
  title: "デベロッパーの月収",
  xLabel: "月",
  yLabel: "$ ドル",
  data: {
    labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
    datasets: [
      {
        label: "計画",
        data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000]
      },
      {
        label: "現実",
        data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150]
      }
    ]
  },
  options: {}
});

 

フォントの変更

 

デフォルトでは英文のフォントなので、optionでフォントを日本語の適当なフォントを当てる

 options: {
     fontFamily:'Yomogi',
  }

 

手書きグラフ

 

 

この記事を読む

【JavaScript】オブジェクト操作

今まで配列操作を紹介してきましたが、これをオブジェクトを操作しようとしてもできません。
同様にオブジェクトを操作するためには、「Object.keys(obj)」で key の配列にして操作するようになります。
 

foreach

 

 
 

map

 

 

 

この記事を読む

【JavaScript】配列操作⑦

JavaScriptにおける配列の操作(「絞り込み(1要素)」「指定の要素が1つでもあるかないか」「指定の要素がすべてあるかないか」)について紹介します。
 
目次
find|絞り込み(1要素)
some|指定の要素が1つでもあるかないか
every|指定の要素がすべてあるかないか

 

find|絞り込み(1要素)

 

   arr.find(callback(element[, index[, array]])[, thisArg])

   callback:各要素に対して実行するコールバック関数で、
   1 つから 4 つの引数を受け付けます。
     element:現在処理されている配列要素です。
     index(省略可):現在処理されている配列のインデックス番号です。
     array(省略可):find() が呼び出されている配列です。
   thisArg(省略可)※:callback 内で this として使用する値です。
   ※callback がアロー関数の場合は利用できません。

返り値は、配列ではなく数字orテキストになります。

 

some|指定の要素が1つでもあるかないか

 

   arr.some(callback(element[, index[, array]])[, thisArg])

   callback:各要素に対して実行するコールバック関数で、
   1 つから 4 つの引数を受け付けます。
     element:現在処理されている配列要素です。
     index(省略可):現在処理されている配列のインデックス番号です。
     array(省略可):some() が呼び出されている配列です。
   thisArg(省略可)※:callback 内で this として使用する値です。
   ※callback がアロー関数の場合は利用できません。

 

every|指定の要素がすべてあるかないか

 

   arr.every(callback(element[, index[, array]])[, thisArg])

   callback:各要素に対して実行するコールバック関数で、
   1 つから 4 つの引数を受け付けます。
     element:現在処理されている配列要素です。
     index(省略可):現在処理されている配列のインデックス番号です。
     array(省略可):every() が呼び出されている配列です。
   thisArg(省略可)※:callback 内で this として使用する値です。
   ※callback がアロー関数の場合は利用できません。

 

 

この記事を読む

【JavaScript】配列操作⑥ ~filter~

JavaScriptにおける配列の操作(filter|絞り込み(複数要素))について紹介します。
 
 

filter|絞り込み(複数要素)

 

   let newArray = arr.filter(callback(element[, index, [array]])[, thisArg])

   callback:各要素に対して実行するコールバック関数で、
   1 つから 4 つの引数を受け付けます。
     element:現在処理されている配列要素です。
     index(省略可):現在処理されている配列のインデックス番号です。
     array(省略可):filter() が呼び出されている配列です。
   thisArg(省略可)※:callback 内で this として使用する値です。
   ※callback がアロー関数の場合は利用できません。

 

 
重複した値の要素を削除する
コールバック関数の引数「array」「value」と「indexOf」で取得したインデックス番号と「indexOf」で取得したインデクス番号を見てみると、重複したデータだけがインデックス番号と同じではないです。
したがって、インデックス番号が同じ要素だけを取り出せばよいことになります。

 
thisArg(省略可):callback 内で this として使用する値です。
※callback がアロー関数の場合は利用できません。

 

 

この記事を読む

【JavaScript】配列操作⑤ ~reduce~

JavaScriptにおける配列の操作(reduce|1つの値を取得)について紹介します。
 
 

reduce|1つの値を取得

 

   arr.reduce(callback( accumulator, currentValue[, index[, array]] ) {
     // return result from executing something for accumulator or currentValue
   }[, initialValue]);

   callback:各要素に対して実行するコールバック関数で、
   1 つから 4 つの引数を受け付けます。
     accumulator:「累積値」、配列要素を順番に処理していった値が格納されます。
     currentValue:現在処理されている配列要素です。
     index(省略可):現在処理されている配列のインデックス番号です。
     array(省略可):reduce() が呼び出されている配列です。
   initialValue(省略可)※:callback の最初の呼び出しの最初の引数として使用する値です。
                initialValue が与えられなかった場合、配列の最初の要素がアキュムレーターの初期値として使用されます。

 

 
reduce()の関数内では「break」は使えません。その代わりに、配列のインデックス番号を利用した中断方法
配列の3番目のインデックス番号になった時点で「arr.splice(0)」を処理して、arrを空配列にして、処理の実行を止めます。

 

合計、平均値、最大値、最小値を取得

 

 

 

この記事を読む

【JavaScript】配列操作④ ~map~

JavaScriptにおける配列の操作(map|新しい配列を生成)について紹介します。
 
 

map|新しい配列を生成

 

   new_array = arr.mach(callback(currentValue[, index[, array]]) {
     // execute something
    //return ****
   }[, thisArg]);

   callback:各要素に対して実行するコールバック関数で、
   1 つから 3 つの引数を受け付けます。
     currentValue:現在処理されている配列の要素です。
     index(省略可):配列内の currentValue の添字です。
     array(省略可):forEach() が呼び出されている配列です。
   thisArg(省略可)※:callback 内で this として使用する値です。
   ※callback がアロー関数の場合は利用できません。

 

 
要素にオブジェクトを持つ配列の場合、次のように要素内のオブジェクトの値を抽出できます。

 
コールバック関数の第3引数は、forEach() が呼び出されている配列になります。
第3引数を利用すれば、元の配列を変更することもできます。

 
thisArg(省略可):callback 内で this として使用する値です。
※callback がアロー関数の場合は利用できません。

 

 

この記事を読む

【JavaScript】配列操作③ ~foreach~

JavaScriptにおける配列の操作(foreach|ループ処理)について紹介します。
 
 

foreach|ループ処理

 

   arr.forEach(callback(currentValue[, index[, array]]) {
     // execute something
   }[, thisArg]);

   callback:各要素に対して実行するコールバック関数で、
   1 つから 3 つの引数を受け付けます。
     currentValue:現在処理されている配列の要素です。
     index(省略可):配列内の currentValue の添字です。
     array(省略可):forEach() が呼び出されている配列です。
   thisArg(省略可)※:callback 内で this として使用する値です。
   ※callback がアロー関数の場合は利用できません。

 

 
要素にオブジェクトを持つ配列の場合、次のように要素内のオブジェクトの値を抽出できます。

 
コールバック関数の第3引数は、forEach() が呼び出されている配列になります。
次の例は、各要素を2倍にしています。

 
thisArg(省略可):callback 内で this として使用する値です。
※callback がアロー関数の場合は利用できません。

 

 

この記事を読む

【JavaScript】配列操作②

JavaScriptにおける配列の操作(「要素の追加」「要素の削除」など)のうち、要素変更に係る操作について紹介します。
 
目次
unshift|先頭に追加
push|末尾に追加
shift|先頭を削除
pop|末尾を削除
splice|位置指定して削除 and 追加
concat|他の配列と結合
slice|一部を抜粋して、配列生成
fill|固定値で埋める

 

unshift|先頭に追加

 

   arr.unshift(element1[, ...[, elementN]])

   elementN:arr の先頭に追加する要素。

 

push|末尾に追加

 

   arr.push([element1[, ...[, elementN]]])

   elementN:配列の末尾に追加する要素。

 

shift|先頭を削除

 

   arr.shift()

 

pop|末尾を削除

 

   arrName.pop()

 

splice|位置指定して削除 and 追加

 

   array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

   start:配列を変更する開始位置を表すインデックスです。
   deleteCount(省略可):配列の start から取り除く古い要素の数を示す整数です。
   item1, item2, ...(省略可):配列に追加する要素で、start から始まります。

 

concat|他の配列と結合

 

   const new_array = old_array.concat([value1[, value2[, ...[, valueN]]]])

   valueN(省略可):新しい配列に連結する配列や値です。
   すべての valueN 引数が省略された場合、 concat は呼び
   出された既存の配列のシャローコピーを返します。

 

slice|一部を抜粋して、配列生成

 

   const new_array = arr.slice([start[, end]])

   start(省略可):取り出しの開始位置を示す 0 から始まるインデックスです。
   end(省略可):取り出しを終える直前の位置を示す 0 から始まるインデックスです。
   slice は end 自体は含めず、その直前まで取り出します。

 

fill|固定値で埋める

 

   arr.fill(value[, start[, end]])

   value:配列に設定する値です。
   start(省略可):開始する位置です。既定値は 0 です。
   end(省略可):終了する位置です。既定値は this.length です。

 

 

この記事を読む
記事一覧に戻る