rChartsのnPlotのオプションをテンプレぽくした
テンプレぽくしました。下記の使用例をコピペ後不要なものを削ってどうぞ。
http://rpubs.com/dichika/nplotoptions
あくまでnPlotのみに通用するオプションなのでご注意ください。
以下説明。
Javascript系のRライブラリはオプションの設定が面倒
rChartsのnPlotは便利です。
たとえばこんな感じでd3.jsのライブラリNVd3を使ったインタラクティブな図ができます。
nPlot(data=iris, Sepal.Width~Sepal.Length, type="scatterChart")
ただしヘルプがないのでオプションの設定がわからずStackOverflowなどを漁る必要があります。
めんどい。
そういえばgoogleVisの時もそうでした。
Javascript系のライブラリはほんと鬼門やで。
ということで以下に私がよく使うオプション一覧をまとめました。全てを網羅はできていないのでご注意ください。
オプションを設定してみてプロットが表示されない時は、そのプロットでは使えないオプションを使っていることが多いので、指定したオプションの内容をご確認ください。
オプション一覧
説明しづらいオプションもあるので本家NVd3のサンプルを見てください。
大要素 | 小要素 | 指定法(初期値) | 内容 | 備考 | NVd3のサンプル |
---|---|---|---|---|---|
chart | color | 色名or16進数(自動) | 点や線の色 | ||
forceX(forceY) | 数値(最大値/最小値) | 軸の表示範囲 | |||
showControls | bool(TRUE) | アニメーションのコントロールの表示 | サンプル | ||
showLegend | bool(TRUE) | 凡例の表示 | サンプル | ||
showDistX(showDistY) | bool(FALSE) | 点からX/Y軸に垂線を表示 | scatterChartのみ | サンプル | |
tooltips | bool(TRUE) | ツールチップを表示させる | サンプル | ||
tooltipContent | 関数(自動) | ツールチップの内容 | 別記 | サンプル | |
useInteractiveGuideline | bool(FALSE) | 複数系列のtooltipをまとめて表示 | linear/areaChartのみ | サンプル | |
showValues | bool(FALSE) | 数値ラベルを表示させる | barChart関連のみ | サンプル | |
margin | 数値(自動) | マージンの設定 | margin=list(top=30, right=20, bottom=50, left=170)という形で指定 | サンプル | |
transitionDuration | 数値(500) | アニメーションの速度 | サンプル | ||
donut | bool(FALSE) | 円グラフの真ん中に穴をあける | pieChartのみ | サンプル | |
donutRatio | 数値(不明) | 円グラフの穴の大きさ | pieChartのみ | サンプル | |
params | width(height) | 数値 | 表示幅 | ||
multi | リスト | 2軸プロットを描く | rCharts独自の仕様っぽい | ||
disabled | bool(全てTRUE) | 表示しないグループを設定する | |||
xAxis(yAxis) | axisLabel | 文字列 | X/Y軸の名前 | ||
axisTicks | TRUE/FALSE | 軸目盛りの有無 | |||
tickFormat | 別記 | 軸目盛りの表記 | |||
tickValues | 別記 | 軸目盛りを明示的に与える |
補足
ツールチップの表示について
tooltipContentでツールチップの内容をカスタマイズしたい場合は関数で指定します。例えば以下のような形です。
tooltipContent="#! function(key,x,y){ return '<h3>'+key+'</h3><h4><p>x:'+x+'</p></h4><h4><p>y:'+y} !#"
デフォルトでは上記で指定している3つに加えてeとgraphの2つを加えた5つの変数をとれます。
宣言していない引数を使うことはできません。また名前ではなく順番で認識されるようなので注意してください。
順番 | 内容 | 慣例としてつく引数名 |
---|---|---|
1 | groupの指定内容 | key |
2 | データ点のX座標 | x |
3 | データ点のY座標 | y |
4 | データ点 | e |
5 | プロットに使われているコード | graph |
上記eについてはe.point.変数名とすることでそのデータを取得できます。
scatterChartにおけるツールチップの表示不具合
scatterChartはツールチップの表示が不安定ですが、NVd3側の問題とのことです。
使ってみて不具合が生じる場合はhPlot(highcharts.js)等他のライブラリを利用することをお勧めします。
https://github.com/ramnathv/rCharts/issues/255
tickについて
下記のような形で指定します。普通に渡すと""で囲まれてしまうので、リテラルとして渡したい時は#! !#で囲みます。
n1$chart(forceY="#![0]!#") n1$xAxis(tickValues="#![11323,11700,12060,12420,12790,13150,13520,13880,14250,14615,14980,15345,15710,16071,16430]!#", tickFormat = "#!function(d) {return d3.time.format('%Y')(new Date( d * 86400000 ));}!#" ) n1$yAxis(tickFormat = "#!function(d) {return d3.format('%')(d)}!#")
ラベルを入れ子にする
ラベルを入れ子にする。staggerLabelsをTRUEにした後、下記のようにフォントサイズを調整しておきます。
<style> svg text {font-size: 9px;} </style>
http://stackoverflow.com/questions/17883017/adjusting-axis-labels-nvd3-graph-in-rcharts