Chart JS V2.0 Line Chart Multi
サンプルの内容
２組のデータを同一Chart内に表示している。 また、Chart のタイトルとX,Y軸のタイトルを追加した。
Base からの主な修正点
Global settings
- グラフのラインとx軸の間は色を塗らない
- グラフのラインを直線にする。
- アニメーションを無効化
Chart.defaults.global.elements.line.fill = false; // 1. Chart.defaults.global.elements.line.tension = 0; // 2. Chart.defaults.global.animation = 0; // 3.
データの追加
データは配列として datasets へ渡す。
datasets: [ { label: "1st Line Chart", data: [ 27, 33, 49 ], borderColor: '#' + pal[3], backgroundColor: '#' + pal[3], }, { label: "2nd Line Chart", data: [ 10, 50, 22 ], borderColor: '#' + pal[4], backgroundColor: '#' + pal[4] } ]
配色
ラインに色を設定した。
data: {
datasets: [
{
borderColor: '#ff00aa'
backgroundColor: '#ff00aa'
},
]
}
凡例
凡例の位置をグラフの下に変更した。
options: {
responsive: false,
legend: {
position: 'bottom',
},
}
グラフのタイトル
グラフのタイトルを追加した。
options: { title: { display: true, text: 'Multi Line Chart' }, }
グラフ軸の改善
Y軸に関しては、
- グラフの原点を0にしたかったので、scales.yAxes.ticks.min を設定
- scales.yAxes.scaleLabel.labelString を設定して、軸のタイトルを追加 (display を true にする必要あり)
X軸に関しては上記の2だけを使用している。
options: { scales: { yAxes: [ { ticks: { min: 0 }, scaleLabel: { display: true, labelString: "Values" } } ], xAxes: [ { scaleLabel: { display: true, labelString: "Date" } } ] } }
palette.js
綺麗な配色を実現しつつ、色盲の方などを考慮した配色にするために Google が提供している JS を利用した。
https://github.com/google/palette.js
var pal = palette('cb-BuGn', 8 );
こんな感じでカラーパレットを rgb 表記の配列として返してくれる。 この配列から適当な色を選択する。 詳しくは前述の git に入っている demo.js を参考にしてください。
全体
おまけ option の構造
Chart JS V2.0 Line Chart Base Sample
目的
昨日のエントリーは不親切だったので、反省して少しずつサンプルを追加する。 まずは Line Chart の Base sample を作成した。
サンプルの内容
一組のデータをほぼデフォルトの値で描画する。 ただし、Canvas のサイズを維持するために、responsive を false に設定している。 この設定を用いないとブラウザの描画エリアを全てに表示される。
cdnjs
Chart.js をネット上で公開しているサービス経由で利用している。 これでローカルにChart.js をダウンロードせずに済む。
サンプル画像
サンプルコード
Chart JS V2.0
Chart JS
オープンソースのグラフ描画用のJSで、私がデータをグラフ化するのに十分な機能がある。 公式のドキュメントがすんなり読めなかったので、拡張機能以外の箇所をまとめて整理しておく。
公式ドキュメント : http://www.chartjs.org/docs/
使えるように準備する
Chart.js をインポートする。
ドキュメントでいうところの"old-scool"スタイルでとりあえず記述する。
<script src="Chart.js"></script> <script> var myChart = new Chart({...}) </script>
グラフを描く領域を準備する。
サイズはとりあえずで設定する。 レスポンシブ（ブラウザのサイズに連動するよう）にもなる。
<canvas id="myChart" width="400" height="400"></canvas>
グラフを描く
基本
<script> var ctx = document.getElementById("myChart").getContext("2d"); var myChart = new Chart(ctx, { type: 'line', data: {...}, options: {...} }) </script>
設定を変更する
具体例はこちらにもあります
type
グラフの種類を選択する。
- line
- 直線
- 散布図も含む
- bar
- 棒グラフ
- radar
- レーダーチャート
- polarArea
- 鶏頭図
- pie
- 円グラフ
- bubble
- バブル
オプション
オプションを設定する方法は、２種類あって
- 全部に一括で設定
- 個々に設定
です。
一括で設定
一括で設定するなら
Chart.defaults.global.hover.mode = 'single'
ただし、一部特別な全体設定として
| # | name | type | default |
|---|---|---|---|
| 1 | defaultFontColor | Color | '#666' |
| 2 | defaultFontFamily | String | "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" |
| 3 | defaultFontSize | Number | 12 |
| 4 | defaultFontStyle | String | 'normal' |
がある。
個々に設定
個々に設定するとき（または一括設定を上書きするの）は前述の hover.mode は
options: { hover: { mode: 'label' } }
こんな階層です。
data
基本的な内容は
data: [ labels: [ "hoge", "foo", "bar" ], datasets: [{ label: '# of Votes', data: [1, 343, 545] }], xLabels: [ ], yLabels: [ ] ]
のようになります。 とりあえず使いそうな Line chart に関してだけ追記します。
詳細は公式ドキュメント : http://www.chartjs.org/docs/ を参照する。
line chart
| Property | Type | Usage |
|---|---|---|
| data | See data point section | The data to plot in a line |
| label | String | The label for the dataset which appears in the legend and tooltips |
| xAxisID | String | The ID of the x axis to plot this dataset on |
| yAxisID | String | The ID of the y axis to plot this dataset on |
| fill | Boolean | If true, fill the area under the line |
| lineTension | Number | Bezier curve tension of the line. Set to 0 to draw straightlines. Note This was renamed from 'tension' but the old name still works. |
| backgroundColor | Color | The fill color under the line. See Colors |
| borderWidth | Number | The width of the line in pixels |
| borderColor | Color | The color of the line. |
| borderCapStyle | String | Cap style of the line. See MDN |
| borderDash | Array |
Length and spacing of dashes. See MDN |
| borderDashOffset | Number | Offset for line dashes. See MDN |
| borderJoinStyle | String | Line joint style. See MDN |
| pointBorderColor | Color or Array |
The border color for points. |
| pointBackgroundColor | Color or Array |
The fill color for points |
| pointBorderWidth | Number or Array |
The width of the point border in pixels |
| pointRadius | Number or Array |
The radius of the point shape. If set to 0, nothing is rendered. |
| pointHoverRadius | Number or Array |
The radius of the point when hovered |
| pointHitRadius | Number or Array |
The pixel size of the non-displayed point that reacts to mouse events |
| pointHoverBackgroundColor | Color or Array |
Point background color when hovered |
| pointHoverBorderColor | Color or Array |
Point border color when hovered |
| pointHoverBorderWidth | Number or Array |
Border width of point when hovered |
| pointStyle | String, Array |
The style of point. Options are 'circle', 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'. If the option is an image, that image is drawn on the canvas using drawImage. |
| showLine | Boolean | If false, the line is not drawn for this dataset |
| spanGaps | Boolean | If true, lines will be drawn between points with no or null data |
| steppedLine | Boolean | If true, the line is shown as a steeped line and 'lineTension' will be ignored |
var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My First dataset", fill: false, lineTension: 0.1, backgroundColor: "rgba(75,192,192,0.4)", borderColor: "rgba(75,192,192,1)", borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: 'miter', pointBorderColor: "rgba(75,192,192,1)", pointBackgroundColor: "#fff", pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: "rgba(75,192,192,1)", pointHoverBorderColor: "rgba(220,220,220,1)", pointHoverBorderWidth: 2, pointRadius: 1, pointHitRadius: 10, data: [65, 59, 80, 81, 56, 55, 40], spanGaps: false, } ] };
Qiita API
Qiita について
ソフトウェアエンジニア用のSNSで、多くの情報があります。
Qiita API について
Qiita が提供している API で、認証無しでも一部は利用可能です。 ただし、ドキュメントはあまり見やすくない。
Rubyでアクセスしてみる
やること
GET アクセスで tag の投稿数を上位から 100 個取得する。
使うライブラリ
Ruby 2.3 の標準ライブラリですべて対応できる。 使うのは
で、おまけで pp も使っている。
手順
アクセスするURIを準備する。
uri = URI.parse( address )
address は具体的には
"http://qiita.com/api/v2/tags?page=xxx&per_page=xxx&sort=count"
Net::HTTP::Get を準備する。
request = Net::HTTP::Get.new(uri.request_uri)
Net::HTTP を準備する
http = Net::HTTP.new( host ) http.set_debug_output $stderr #=> デバッグコメントを出したいなら
アクセスする。
resp = http.request(req)
resp はHTTPのレスポンス毎にクラスが分かれていて、分岐することができる。 アクセス全体を例外処理できるようにしておいた方がデバッグしやすい。
JSON
JSON.pretty_generate( JSON.parse( body ) )
うまくアクセスできれば JSON でレスポンスが返ってくる。 それは resp.body で参照可能だが、そのまま標準出力やファイルに書き出すと少し見難いので、JSON ライブラリで加工する。
または Ruby の Hash にしてスクリプト内部で利用することも可能です。
Ruby によるアクセス用サンプルクラス
使い方
全体をまとめたクラス QiitaGet を作成して、
qiita = QiitaGet.new printf( "%s\n", qiita.get_pretty( "tags", {page: 1, per_page: 100, sort: "count" } ) )
こんな感じで、tag の投稿数を上位から 100 個取得することができる。
全容
bash on ubuntu on windows での GUI
目指している環境
bash on ubuntu on windows から GUI アプリを飛ばして、VcXsrv で利用したい。
事前に VcXsrv をインストールする。
Xming を利用していたが、VcXsrv の方が Openで Freeなので乗り換える。
x11-apps をインストール
x11-apps をインストールして起動を確認した。 この時、DISPLAY は
export DISPLAY=127.0.0.1:0
で設定してある。
x11-apps は動いたけど
どうも D-Bus がうまく動いていないため、 デスクトップマネージャはうまく動かないとのことです。
dbus の対策
/etc/dbus-1/session.conf を下記のコマンドなどを利用して、書き換える必要がある。
sudo sed -i 's$<listen>.*</listen>$<listen>tcp:host=localhost,port=0</listen>$' /etc/dbus-1/session.conf
D-Bus の通信を TCP を利用して代用するってことらしい。 この辺の知識は不足しているので詳細までは把握できず。
emacs は使えない
上記を修正すると emacs を起動するときのメッセージは減ったが、 まだ少しメッセージが残っているし、正常起動しない。
Qiita にヒントがあったが試していない。
つまり、DBUSを使わないように --without-dbus でビルドすることができるらしい。
結論
やっぱり正式に GUI をサポートしてくれないとなかなか厳しい。 上記の様に対応すればなんとか使えそうだが、何かあるとすぐに別の方法が必要になりそう。 環境を構築するのが目的になりそうなため、諦めて別途Linuxマシンを立ち上げようかと思う。
おまけ
Dbus の事を記載しているサイトのリンクを記事に記載すると Bad request レスポンスが返ってきてエラーになる。 時間があれば問い合わせてみよう。
