インフラエンジニアを募集中です。詳細はこちら棒グラフで複数の要素を重ねてカッコよく見せる方法JavaScriptyamashita2018.04.24みなさんごきげんよう、この前MX4Dを体験してきたyamashitaです。座席の座りにくさと始めだけ揺れが気になりましたが楽しかったです。今回はそんなMX4Dとは関係ないですが、表題の通りグラフを少しカッコよくする方法を紹介したいと思います。使用するライブラリはjqPlotです。重ねてしまう!いかがでございましょうか。比較するグラフとしてなんだかそれっぽい雰囲気を醸し出していませんか。気になるやり方です導入方法まで書くと長くなりそうなので割愛しますが、ライブラリ内のプラグインが機能毎に必要になるので適宜読み込みを忘れないようにしましょう。Javascriptのコードはこんな感じです。);}HTMLに任意のIDを用意して、以上のコードをonloadか何かで呼び出してください。今回の重ねるやり方の肝はこの部分です。30}//棒のデザインとか位置barPaddingは二つの要素の間の距離です。単純ですが、これが0なら密着しマイナスなら重なるというわけです。barWidthに-1をかけた値ならピッタリ重なるので、それもいつか使う時が来るかもしれませんね。その場合二つの要素の関係が常にA>Bでないと見えなくなってしまいますが・・・もちろんbarPaddingの値をどんどん下げていけばお互いの距離が近付くばかりか反対方向に離れていきます。要素の値や色もひっくり返せば棒の前後だけ逆になるので「二つ目の要素が上に被さってるのは違和感がある!」という方は試してみてください。個人的にはこちらがしっくり来ました。今回の話は以上になります。少々強引な力技のような気もしてますが、調べても実現できそうなオプションが見つからなかったので、このような形で紹介させていただきました。同じような事をしたかったという方がいらっしゃったら是非試してみてください。便利JavaScriptfujihara2019.05.17はてブバシャログ。Web制作スタッフによるブログです。「現場で使えるテクニック」をモットーに、Web制作全般についてお届けします。