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. 少しだけ試行錯誤しつつ…も、簡単にできます
    シネマグラフを作ってみた
  2. gahag-0108338313-1
    今話題のMRについて
  3. gahag-0081078485-1
    好きな画像を背景にしたプロット図(散布図)を作成する
  4. tokuige
    GASを使ってGmailから本文の一部を抜き出す

おすすめ記事

  1. スギ花粉
    鼻がムズムズ目がカユカユな花粉症についてまとめてみた
  2. 『テレビ観ないんだよね…』と言うのがかっこいいと思っている人に告ぐ!
  3. 出典:無料壁紙:格闘技がテーマの写真やイラスト画像まとめ(格闘家・ブルースリー)
    ブルース・リーの出身地ってどこだかわかりますか?
  4. ハイビスカス
    ウチナーンチュが沖縄に帰った時に必ず行くお店10選+α
  5. イニシャルサイトコーポレートサイト
    コーポレートサイトをリニューアルしました
  6. なんでもQ
    相談Q&Aサイト「なんでもQ」開発中です!
  7. さんぽすフォトコンペ開催中
    今年もさんぽすフォトコンペ開催しました!

人気の記事

  1. ファミコン
    パズドラ、モンスト、白猫に続く次のゲームは…?
  2. konagaya_20150303
    日常でつい使ってしまう間違えやすい日本語
  3. クロックスの偽物と本物の違い
    クロックスの本物と偽物の違いを比べてみました
  4. konagaya20150513
    初心者でも気軽に登れて絶景が見れる山