highlightjs– tag –

Laravelに入門する方を対象に、「基本のタスクリスト」チュートリアルをLaravel 5.5で行う方法を順を追って紹介しています。 この記事は、次の記事に続く2つ目の記事です。 Laravel 5.5 入門として「基本のタスクリスト」を作成する [その1] 前回次の作業を行い、作成したところまでの動作をhttpサーバを起動して確認しました。 アプリケーションで使用する空のデータベースhomesteadを作成 タスクを保存するTasksテーブルをマイグレーションファイルに定義 マイグレーション 空のTaskモデルを定義 3つの空のルー...

Laravel公式にあるクイックスタートは2017年9月現在では古く、Laravel 5.5ではディレクトリ構造が異なっているなどして、スムーズに進められません。 他の良いチュートリアルとして、Laravel 5.2までドキュメントに含まれている「基本のタスクリスト」があります。 そこでこの記事では、Laravelに入門する方を対象に、そのチュートリアルをLaravel 5.5で行う方法を順を追って紹介します。 記事は次の3回に別れており、本記事は1つ目の記事です。 Laravel 5.5 入門として「基本のタスクリスト」を作成する [その1] ...

Chart.jsはレスポンシブ対応のjavascriptチャートライブラリです。 レスポンシブ対応を謳っていますが、パイチャート/ドーナッツチャートをスマホなどの幅の狭い画面で表示させると、パイが縮小されすぎて見づらくなってしまいます。 それを防ぐ方法を紹介します。 問題 Chart.jsでパイチャートを描いて、横幅~320 pxのスマホで表示させると次のようにパイ部分が潰れてしまいます。   対策 縦横比はデフォルトでは横長になっています。横幅の小さい画面でも、それを維持しようとするため、凡例(keys/legend)...

Chart.jsのパイチャートやドーナッツチャートで、データ割合をパーセント表示する方法を紹介します。 方法 次のような流れで、パーセント表示を行います。 データの合計値を求めます データ値を合計値で割ってデータ割合を求めます ラベルとしてパイ中に表示します データの合計値を求める まず、データの合計値は、次のようにデータセットごとに求めます。 chart.data.datasets.forEach(function (dataset, i) { var dataSum = 0; dataset.data.forEach(function (element){ dataSum += element; }); }); data配...