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

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

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

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

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

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

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

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

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