iMind Developers Blog

iMind開発者ブログ

javascript

chart.jsで時系列のグラフ

概要 chart.jsの折れ線グラフで時系列のデータをグラフ表示する。 バージョン情報 Chart.js v2.9.3 Moment.js v2.24.0 導入 日時を扱う場合はMoment.jsが必要になるので、下記からインストールしておく。 https://momentjs.com/ cdnjsだとこのへん。 https:/…

log4jsによるログ出力

概要 log4jsを使ってログ出力、フォーマットの変更、ファイル出力、ログローテーション等を行う。 バージョン情報 node v10.15.1 log4js@5.1.0 インストール $ npm i log4js コンソールへのログ出力 ログレベルをinfoに設定してログを出力してみる。 const l…

puppeteerでWebの画面操作とスクレイピング

概要 puppeteerを使って下記の項目などを実行する。 URLを叩いて結果をスクリーンショットとHTML本文の2パターンで保存する ページにテキストを入力してボタンを押す 当該ページに表示されている画像をまとめて保存する ページ遷移しながらスクレイピングし…

chart.jsの円グラフのラベルを線で指して表示する

概要 chart.jsの円グラフのラベルを線をびーっと引いてその先に表示するようにしてみたい。 完成図 バージョン情報 chart.js 2.8.0 chartjs-plugin-piechart-outlabels 1.1.2 通常の円グラフ まずは最低限のコードで円グラフを生成。 <html> <head> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css"/> </link></head></html>

chart.jsの円グラフの中に値を表示する

概要 chart.jsで作った円グラフのグラフ内にパーセンテージを表示するようにする。 完成図 バージョン情報 chart.js 2.8.0 chartjs-plugin-datalabels 0.6.0 通常の円グラフ まずは最低限のコードで円グラフを生成。 <html> <head> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css"/> </link></head></html>

chart.jsでグラフ上に任意の画像を表示する

概要 chart.jsのグラフの上に任意の部分に画像を表示したかった。 バージョン情報 chart.js 2.8.0 動作確認ブラウザ Firefox 67.0 Chromium 75.0 作成する画面 みんな大嫌いなPie Chartで中央に黒い太陽の絵を置いてみる。下記のようなイメージ。 ただのPie …