質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

2016閲覧

jqplotのバブルチャートでズーム表示する方法

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2015/12/10 13:50

jqueryプラグイン jqplotで
バブルチャートをズーム表示する方法を教えてください。

下記コードでズーム表示すると、ズームはするのですが、バブル要素がグラフの枠外にまではみ出て表示されてしまいます。
オプションの設定を色々試したり、公式ページも確認したのですが、
解決策がわかりませんでした。

html

1<!doctype html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" type="text/css" href="./dist/jquery.jqplot.css" /> 6 <!--[if IE]><script language="javascript" type="text/javascript" src="./dist/excanvas.js"></script><![endif]--> 7 <script language="javascript" type="text/javascript" src="./dist/jquery.min.js"></script> 8 <script language="javascript" type="text/javascript" src="./dist/jquery.jqplot.min.js"></script> 9 <script language="javascript" type="text/javascript" src="./dist/plugins/jqplot.logAxisRenderer.js"></script> 10 <script language="javascript" type="text/javascript" src="./dist/plugins/jqplot.bubbleRenderer.min.js"></script> 11 <script language="javascript" type="text/javascript" src="./dist/plugins/jqplot.cursor.min.js"></script> 12 13</head> 14<body> 15 16<div id="sample1" style="height: 300px; width: 300px;"></div> 17<script> 18jQuery( function() { 19 jQuery.jqplot( 20 'sample1', 21 [ 22 [ [ 1, 1, 1, 'A' ], [ 2, 2, 2, 'B' ], [ 3, 3, 3, 'C' ], [ 4, 4, 4, 'D' ], [ 5, 5, 5, 'E' ], [ 6, 6, 6, 'F' ] ] 23 ], 24 { 25 seriesDefaults: { 26 renderer: jQuery . jqplot . BubbleRenderer, 27 }, 28 cursor:{ 29 show: true, 30 zoom: true, 31 } 32 } 33 ); 34} ); 35</script> 36 37 38</body> 39</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

単純に、バブルが表示されている親要素のスタイルにoverflow: hidden;すればよいのですが、厳密に掛けるために、jqplot適用後に生成されている要素へ直接スタイルを適用します。

css

1<style type="text/css"> 2div.jqplot-series-canvas { 3 overflow: hidden; 4} 5</style>

これだけです。

投稿2015/12/10 15:16

blackonyx

総合スコア354

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問