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

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

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

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

Q&A

解決済

1回答

2369閲覧

JQPLOTでX軸のラベルを分で表示したい

K_yamasaki

総合スコア15

jQuery

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

0グッド

0クリップ

投稿2019/02/25 04:39

編集2019/02/26 00:54

前提・実現したいこと

データとして600個の数値を保存した配列があります。
これをJQPLOTでグラフにしておりますが、現在X軸の範囲はmin:0,max600としており、
インターバールは60毎としています。
ラベルで秒としており、0~600秒のグラフを描いています。
これを0~10分と表示したいのですが、方法がわかりません。

発生している問題・エラーメッセージ

該当のソースコード

javascript

1 2<!--プラグイン--> 3<!--1.jQueryの読み込み--> 4<script language="javascript" type="text/javascript" src="./Scripts/jquery-1.8.1.min.js"></script> 5<!--3.プラグインの読み込み--> 6<script language="javascript" type="text/javascript" src="./plugins/jquery.jqplot.min.js"></script> 7<!--4.CSSの読み込み--> 8<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.min.css" /> 9 10 11jQuery(function(){ 12 13 for(i=0;i<600;i++){ //仮入力 14 data[i] = i; 15 } 16 17 jQuery.jqplot( 18 'line', 19 [data], 20 { 21 title: { 22 text:'DATA', 23 show:true, 24 textAlign:'center', 25 }, 26 axes: { 27 xaxis:{ //ここを0~10分、1分毎にしたい 28 min:0, 29 max:600, 30 tickInterval: '60', 31 label:'秒', 32 }, 33 yaxis:{ 34 min:0, 35 max:600, 36 tickInterval:'100', 37 label:'個', 38 }, 39 }, 40 series:[ 41 { 42 markerOptions: { 43 show: false 44 }, 45 color:'red', 46 }, 47 ], 48 } 49 ).replot(); 50} ); 51 52} 53 54<!--html--> 55<div id="line" style="height: 350px; width: 500px; margin:0 auto;"></div> 56<div style="clear:both;"></div>

試したこと

[data]を作成するところを以下のように変更しましたが、できませんでした
for(i=0;i<600;i++){
mints= Math.floor(i,60);
sec = i % 60;
data[i] = [mints:sec,i];
}

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

m.ts10806

2019/02/25 04:53

念のため「jQueryプラグイン」もタグに追加しておいてください。 あとプラグインに限らず、バージョンと「どこから持ってきたものか」というのは必要です。 プラグイン取得先のURLや、JavaScriptの読み込み記述のHTML部分、対象が反映されるHTML(というかHTML全体ですね)もご提示ください。 ※質問は編集できますので適宜ご対応ください。
guest

回答1

0

自己解決

以下のようにデータの作り方を
data = [];
for(i=0;i<600;i++){ //仮入力
data.push([i/60,i]);
}
のようにして、xaxis のmax等を以下のようにすると解決しました。
xaxis:{ //ここを0~10分、1分毎にしたい
min:0,
max:10,
tickInterval: '1',
label:'分',
},

アドバイス頂いた方、有難うございました。

以下修正コード

<!--プラグイン--> <!--1.jQueryの読み込み--> <script language="javascript" type="text/javascript" src="./Scripts/jquery-1.8.1.min.js"></script> <!--3.プラグインの読み込み--> <script language="javascript" type="text/javascript" src="./plugins/jquery.jqplot.min.js"></script> <!--4.CSSの読み込み--> <link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.min.css" />

jQuery(function(){

data = []; for(i=0;i<600;i++){ //仮入力 data.push([i/60,i]); } jQuery.jqplot( 'line', [data], { title: { text:'DATA', show:true, textAlign:'center', }, axes: { xaxis:{ //ここを0~10分、1分毎にしたい min:0, max:10, tickInterval: '1', label:'分', }, yaxis:{ min:0, max:600, tickInterval:'100', label:'個', }, }, series:[ { markerOptions: { show: false }, color:'red', }, ], } ).replot();

} );

}

<!--html--> <div id="line" style="height: 350px; width: 500px; margin:0 auto;"></div> <div style="clear:both;"></div>

投稿2019/02/26 02:22

K_yamasaki

総合スコア15

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.31%

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

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

質問する

関連した質問