こんにちは
開発部のモリヤです。

お仕事でプロット図を表示するページを作成した際に、「jqPlot」というjQueryプラグインを使ってみたのですが、自分で作った画像を背景に設定する方法が調べても出てこなかったため自分なりのやり方を備忘として残したいと思います。

jqPlotの取得

以下のサイトからjqplotのプラグインを取得し、作業環境に展開する。

http://www.jqplot.com/

使用するのは、下記の3ファイルとなります。

・jquery.jqplot.min.js（jqPlotプラグインの本体）

・jquery.jqplot.min.css（jqPlotのスタイル）

・plugins/jqplot.pointLabels.min.js（散布図作成時に使用）

まずは使ってみる

解説サイトのサンプルを使い、まずは出力を確認。

jQuery の jqPlot プラグインで作る散布図

HTML

<div id="jqPlot-sample" style="height: 300px; width: 300px;"></div>

JS

<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>

デモ

問題なく表示出来て一安心。

さて、ここから手を加えていきます。

X軸・Y軸の罫線を消す

まずは「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に詳しければ、画像を別領域に描画してプロット図と重ね合わせるといった手も使えるのかなーと思います。