読者です 読者をやめる 読者になる 読者になる

Chart JS V2.0 Scatter chart base

目的 散布図の書き方のベースを作成する。 結果 概要 Charjs で line chart を指定して、データは x,y データを保持したオブジェクトの配列、[{x: n, y, m}, ...] を指定する。ただし、options.scales.xAxes を指定し忘れると散布図にならないので注意する。…

Chart JS V2.0 Bar Chart Pattern Sample

目的 bar chart は標準で1色でのベタ塗りだが、 モノクロでも識別できるようにパターンを使って塗りつぶすようにする。 最終結果 解決方法 元々, backgroundColor にパターンを渡すとそれで塗りつぶせるようになっているので、 パターンをどこかで作って渡…

Chart JS V2.0 Line Chart Point Style II

サンプルの内容 以前のサンプルでは凡例の周りが、チャート内でポイントを結ぶ線になっている。 そのため、個人的に不満が残る結果だったのを修正する方法を説明する。 options.legend.labels.generateLabels を利用する方法の説明となる。 これが、 こうな…

Chart JS V2.0 Bar Chart stacked Sample

サンプルの内容 積み上げ棒グラフにしてみました。 また、y軸を 0 から始まるように修正しています。 コード gistce77ea5cec5f5635eb70038134f2ce4c 解説 options: { scales: { xAxes: [{ stacked: true, }], yAxes: [{ stacked: true, }] } } options.scale…

Chart JS V2.0 Bar Chart Base Sample

サンプルの内容 bar chart を作成します。 まずはほとんどデフォルト設定です。 概要 2つのデータを与えると、ラベルにそれぞれ対応するデータを表示できます。 ただし、y軸が 10 で始まっていたりして、Bar chart の禁じ手になっています。 次回はこれを修…

Chart JS V2.0 Line Chart Point Style

サンプルの内容 線の種類を変更して、点のスタイルを変更している。 また、凡例も点のスタイと一致させている。 Base からの主な修正点 変更点は 線種の変更 点の変更 凡例の変更 の3点となる。 線種の変更 data.datasets.borderDash に配列で数値を渡すこ…

Chart JS V2.0 Line Chart Multi

サンプルの内容 2組のデータを同一Chart内に表示している。 また、Chart のタイトルとX,Y軸のタイトルを追加した。 Base からの主な修正点 Global settings グラフのラインとx軸の間は色を塗らない グラフのラインを直線にする。 アニメーションを無効化 Ch…

Chart JS V2.0 Line Chart Base Sample

目的 昨日のエントリーは不親切だったので、反省して少しずつサンプルを追加する。 まずは Line Chart の Base sample を作成した。 サンプルの内容 一組のデータをほぼデフォルトの値で描画する。 ただし、Canvas のサイズを維持するために、responsive を …

Chart JS V2.0

Chart JS オープンソースのグラフ描画用のJSで、私がデータをグラフ化するのに十分な機能がある。 公式のドキュメントがすんなり読めなかったので、拡張機能以外の箇所をまとめて整理しておく。 公式ドキュメント : http://www.chartjs.org/docs/ 使えるよう…