- モリヤ
総記事本数:11
こんにちは
開発部のモリヤです。
お仕事でプロット図を表示するページを作成した際に、「jqPlot」というjQueryプラグインを使ってみたのですが、自分で作った画像を背景に設定する方法が調べても出てこなかったため自分なりのやり方を備忘として残したいと思います。
以下のサイトからjqplotのプラグインを取得し、作業環境に展開する。
使用するのは、下記の3ファイルとなります。
・jquery.jqplot.min.js(jqPlotプラグインの本体)
・jquery.jqplot.min.css(jqPlotのスタイル)
・plugins/jqplot.pointLabels.min.js(散布図作成時に使用)
解説サイトのサンプルを使い、まずは出力を確認。
<div id="jqPlot-sample" style="height: 300px; width: 300px;"></div>
<script>
$( function() {
$.jqplot(
'jqPlot-sample',
[
[
[ 88, 65, 'A' ], [ 36, 22, 'B' ], [ 33, 54, 'C' ],
[ 51, 63, 'D' ], [ 21, 91, 'E' ], [ 45, 79, 'F' ]
]
],
{
seriesDefaults: {
color: '#7dffc7',
showLine: false,
markerOptions: {
size: 16
},
pointLabels: {
show: true,
location: 'n',
ypadding: -12,
}
}
}
);
} );
</script>
問題なく表示出来て一安心。
さて、ここから手を加えていきます。
まずは「tickOptions」の「showGridline」を使って罫線を非表示にします。
<script>
$( function() {
$.jqplot(
'jqPlot-sample',
[
[
[ 88, 65, 'A' ], [ 36, 22, 'B' ], [ 33, 54, 'C' ],
[ 51, 63, 'D' ], [ 21, 91, 'E' ], [ 45, 79, 'F' ]
]
],
{
axes: {
xaxis: {
tickOptions: {
showGridline: false,
},
},
yaxis: {
tickOptions: {
showGridline: false,
},
},
},
seriesDefaults: {
color: '#7dffc7',
showLine: false,
markerOptions: {
size: 16
},
pointLabels: {
show: true,
location: 'n',
ypadding: -12,
}
}
}
);
} );
</script>
罫線を消して空っぽになったプロット図表示領域に背景画像を設定します。
やり方としては、jqPlotの出力処理後に、background-imgのスタイル追加処理を追記します。
$(‘#jqPlot-sample > .jqplot-series-shadowCanvas’).css(“background-image”,”url(画像URL”);
こんな感じで、背景画像を設定することが可能となります。
CSSの知識がないので無理やりやってみましたが、CSSに詳しければ、画像を別領域に描画してプロット図と重ね合わせるといった手も使えるのかなーと思います。
コメントをどうぞ