Initial Site

Initial Site

Initial Site

好きな画像を背景にしたプロット図(散布図)を作成する

  • モリヤ  2018/01/31 17:06
gahag-0081078485-1

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

お仕事でプロット図を表示するページを作成した際に、「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>

デモ

p1

 

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

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

 

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”);

背景画像設定後のデモ

p2

 

こんな感じで、背景画像を設定することが可能となります。

 

CSSの知識がないので無理やりやってみましたが、CSSに詳しければ、画像を別領域に描画してプロット図と重ね合わせるといった手も使えるのかなーと思います。


コメントをどうぞ

技術の記事

  1. mac-459196__340
    WordPressで出力内容が動的に変わる固定ページの<title>を変更
  2. startup-593296_960_720
    XAMPPのローカル環境を同じ社内LAN内の別PCからアクセスする方法
  3. 呪文
    実は俺、、、ホイミ使えます。
  4. printscreenFTHG9249_TP_V
    JSON形式でPOSTされたデータの受信方法