Chart.js で単位の違うグラフを同一上に

Question

Chat.js で棒グラフ (Bar Chart) を表示させているのですが、
単位が極端に違う2種のグラフを同一のグラフ内に
表示させようとしています。
具体的には受注数と受注額といったヤツで、
かたや100件、かたや100万とかになるので、
受注数の方は完全に見えなくなります（笑）。
受注数の方を受注額に合わせて数千～数万倍にすればいいのですが、
実際の数値とは違ってしまいます。

違う単位軸の複数のグラフを同一グラフ上に
表示する方法をどなたかご存じないですか？

Answer 1

2軸にすると良いのではないでしょうか。

Comments

[garamond]

jqplot は2つの軸を元々持ってるようですね！
これでいけそうな気がします。
ちょっと明日以降になりそうですが、
試してみます。

[garamond]

返信が遅れてすみません。
やっと2軸のチャートが描画できることを確認できました。
x軸のラベルに「1月、2月...」と入れていた所、
描画にバグが出ました。それで遅れてしまいました。
数字のみにすると大丈夫です。
あと jqplot 本体だけではダメで、
たくさんのオプションを読み込まねばなりません。
これがちょっとう～ん…です。
ともあれ、ありがとうございました。

ちなみ公式ドキュメントでは、
以下のページの一番下の例に出ています。
http://www.jqplot.com/examples/axisLabelsRotatedText.php

Answer 2

ドキュメント を見る限り、オプションは用意されていないようですね…

好むか好まざるかはお任せしますが、自分だったら…

金額の方を 10000分の1 でグラフを描画して、configuration options の tooltipTemplate をいじって、n(万円) という表記にしちゃうかな…。

Comments

[garamond]

ご回答ありがとうございます。
最悪はコレですね…。

Answer 3

c3ではダメですか？こちらは標準で複数の棒グラフや、折れ線グラフに対応しています。

Comments

[garamond]

回答有り難うございます。
Chart.js でも複数のグラフには対応しています。
ただ、それぞれの数値に違いが大きすぎる場合、
最大値が大きい方に設定されてしまうので、
小さい方のグラフはほとんど見えなくなるんです。
これをどうにかしたい、ということです。

[horse_n_deer]

分類ごとに最小値と最大値を設定しておき、実際の数値ではなく、その設定値の相対値で標準化すれば、グラフが均等に棒グラフを描けるように思えます。

[garamond]

ふたたびありがとうございます。
ちょっと c3 のドキュメントをよく読んでみます。

[horse_n_deer]

グラフに使う数値とは別に、ラベルの表示に関数を挟めることがc3は出来たはずなので、試してみてください。

[horse_n_deer]

と、済みません。chartjsにもラベルを整形するオプションがありますね。よく読んでから回答するべきでした。
http://stackoverflow.com/questions/20371867/chart-js-formatting-y-axis

追記：
少しChartjsを試してみましたが、ラベルの整形は関数を挟んで出来ても、データ元の番号は特定できないようです。関数の第一引数に値だけ渡ってきました。
http://jsfiddle.net/59naga/vy0yhd6m/265/