PlusOne Blog

「JavaScript」に関する記事

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

JavaScript

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

円グラフ（ドーナツ状）

　

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】手書き風グラフⅡ②

JavaScript

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

棒グラフ（縦）

　

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】手書き風グラフⅡ①

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】手書き風マーカや強調、囲いなど

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】手書き風グラフ

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】オブジェクト操作

JavaScript

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

foreach

　

　
　

map

　

　

　

この記事を読む

【JavaScript】配列操作⑦

JavaScript

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

　

find｜絞り込み(1要素)

　

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

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

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

　

some｜指定の要素が１つでもあるかないか

　

　　　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

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

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

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 がアロー関数の場合は利用できません。

　

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

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

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

　

　

この記事を読む

【JavaScript】配列操作③　～foreach～

JavaScript

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

foreach｜ループ処理

　

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

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

　

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

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

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

　

　

この記事を読む

【JavaScript】配列操作②

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 です。

　

　

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