今回は、「【Monaca】D3.jsを使用したグラフの特定の軸の色を変更する」で使用したコードを流用し、グラフの背景をグラデーションに変更する方法を紹介します。


まず、ツールバーとグラフが一体化したように見せるため、ツールバーの文字色と背景色を変更します。

ons-toolbarmodifier属性にtransparentを指定することで、ツールバーの区切りを消すことができます。

グラフの背景をグラデーションになるように変更し、見えやすいように縦軸および横軸の色を変更します。

Monacaデバッガーの結果です。
Android版およびiOS版となります。

単調なグラフも、色を変えるだけで違った雰囲気が表現できます。

【Monaca】D3.jsのグラフの背景をグラデーションに変更する
Tagged on: