前回の記事では、Chart.jsの基本的な部分（基本要素、構造、実装例）を紹介しました。
ここでは、前回実装したグラフをカスタマイズして、さらに細かな設定を行う方法について紹介します。
※以下の実装例では、変更点のみを記載しています。
軸を入れ替えるためには、以下の2つの処理を行います。
①optionsにindexAxisを追加します。
options: {
indexAxis: 'y'
}
②scalesのxとy内の設定を全て入れ替えます。
Chart.js とは、データを視覚化するためのオープンソースのJavaScriptライブラリです。
以下のような特徴があります。
1. 折れ線グラフ、棒グラフ、円グラフなどの様々なスタイルをサポート。
2. 使いやすいインターフェースで、数行のコードでチャートを作成することが可能。
3. 色やフォント、サイズなどをカスタマイズでき、独自のデザインに合わせることが可能。
4. アニメーション効果を追加したり、ユーザーの操作に応じて動的にデータを表示することが可能。
Chart.jsの基本的な設定方法については、以下の公式サイトを参照してください。
https://www.chartjs.org/docs/latest/
ここでは、Chart.jsの基本要素、構造と簡単な実装例を紹介します。
※今回の実装例は、Chart.jsバージョン4.4.3に基づいています。
こんにちは。
本日はタイトルの通り、JSON Editorについてご紹介します。
JSON Editor
https://github.com/json-editor/json-editor
JSON EditorはJavaScriptのOSSであり、最大の特徴は
「JSONスキーマから動的に入力フォームを作成できる」という点になります。
Webアプリケーションの構築時、入力フォームの作成はかなり時間がかかる部分かと思います。
ユーザ向けにどのようなデザインがいいのか、バリデーションチェックや
セキュリティの観点で問題ないのか・・・など、考える部分が多くあります。
そこで、入力フォームの内容はJSONスキーマで定義してしまって、
後はJavaScriptで動的に作ってしまおう、というのがこのJSON Editorになります！
今年度入社の新人がJavaScriptの勉強をしていました。
少し手ほどきした、という話は以前にしました。
前回、前々回に引き続き、JavaScriptについて、簡単な説明を行いたいと思います。
今回も以後、「JS」と略記しますね。
前回に引き続き、JavaScriptについて、簡単な説明を行いたいと思います。
今回も以後、「JS」と略記しますね。
今年度入社の新人と一緒に仕事をする機会がありました。
2年間（Web系の）Javaをやってきただけあってとても優秀です。
私に教えられることはあまりないのですが、広く技術を身に着けていく手始めに、Javaとは対照的なJavaScriptについて簡単に説明しました。
ちょっと面白かったので、3回に分けて当ブログにも残しておこうと思います。
JavaScriptのDateが不親切なのは周知の事実だと思いますが、以下のようなサイトを見つけました。
この記事によれば、setDate、setMonth、setYearに数字を入れれば良いだけ、ということになります。
じゃあ１日-1は0日とか、31日+1日は32日と言う指定の場合はどうなるのか、試してみました。
KnockoutJSを使ってSVGを制御するサンプルを作ってみました。
こんな感じです。
長らくSVG実装が出揃わない状況が続いていましたが、最近やっと落ち着いてきました。
慣れ親しんだDOM操作で厳密な座標が制御できるSVGは、Web上でちょっとしたグラフ等を表示するのにとても都合がいいです。
また、MVVMによる画面制御も、jQueryのセレクタ管理に疲れた体にとてもやさしいです。
データを更新するだけでKnockoutJSがDOMを更新してくれるので、画面制御のためのコードがありません。
上のサンプルはHTMLとJavaScriptあわせて50行に満たない簡単なものですので、解説は不要だと思います。
以上です。
SPA(=Single Page Application)の構築などに必要不可欠なJavaScriptのフレームワークですが、
今回は、その中でも後発でシンプルな作りの「Vue.js」を触ってみたので、ご紹介します。
