- ベストアンサー
jquery＋csvで簡易電力メーターを作成中！
- 節電対策として、jquery＋csvを使用して簡易電力メーターを作成しています。
- 現在の時間帯の電力使用量を読み込み、その値を画像の長さに反映させています。
- しかし、特定のCSVに対応する際には最終行の3列目を指定する必要があります。どのようにアプローチすればよいでしょうか？
- momo_monom
- お礼率29% (7/24)
- JavaScript
- 回答数6
- ありがとう数0
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (5)
- babu_baboo
- ベストアンサー率51% (268/525)
- babu_baboo
- ベストアンサー率51% (268/525)
- babu_baboo
- ベストアンサー率51% (268/525)
- mikemike7
- ベストアンサー率87% (97/111)
- askaaska
- ベストアンサー率35% (1455/4149)
次の行がなければ最終行 という処理をすればOK。
補足
なるほど、、、ありがとうございます。 しかし、私のjavascriptの知識では、 手詰まりの模様です。
関連するQ&A
- FLASHでCSVを配列で読込後、読み込んだ配列を関数の外で使いたい。
FLASHでCSVを配列で読込後、読み込んだ配列を関数の外で使いたい。 下記のスクリプトでCSVから配列を取り込みましたが、 関数の外で、「csvRows」変数の中身を見る方法が分かりません。。 var csvLoader = new LoadVars(); var theFileObj = new LoadVars(); var theFile = csvLoader.sendAndLoad("test.csv",theFileObj,GET ); var csvRows = new Array(); theFileObj.onData = function(src) { var theFileArray = src.split("\r\n").join("\n").split("\n"); var theFieldNames = theFileArray[0].split(","); var numberOfFields = theFieldNames.length; for(var j=0; j<numberOfFields; j++){ theFieldNames[j] = removeQuotes(theFieldNames[j]); } for(var i=0; i<theFileArray.length; i++){ var tempArray = theFileArray[i].split(","); csvRows.push(tempArray); } } function removeQuotes(theString){ if (theString.charAt(0) == '"' || theString.charAt(0) == "'") { return theString.substr(1, theString.length - 2); }else { return theString; } }
- ベストアンサー
- Flash
- JQuery のCSVについて
JQuery のCSVについて JQCSV というプラグインを検討していますが、動作が不安定なことが見出されました。状態・対応の方法をお教えください。（IE6.0) <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="subf/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="subf/jQCSV.js"></script> <script type="text/javascript"> var qRec; $(function (){ $.get("camData.csv",function(text){ qRec =$.csv()(text); }); alert("AAA"); alert(qRec[1][0]); $.get("refA.txt",function(text){ alert(text); $('#tell').html(text); }); }); </script> </head> <body> <div id="tell">aaa</div> </body></html> 上のコードで、alert("AAA") をコメント行とすると、alert(qRec[1][0]); 以下が動作しません。 これはどのような現象でしょうか。対応法はありますでしょうか。
- 締切済み
- JavaScript
- jQueryが読み込めない
下記のようにサンプルコードを入力し、同一ファイル内にjsファイルを設置しているのですが、機能せず、ただのテキストボックスが表示されるのみです。 大変初歩的な質問ですが、よろしくお願いします。 ■ｐｈｐファイル <body> <form action="" method=""> <label for="user-name">お名前</label><input type="text" id="user-name"><br> <label for="user-kana">フリガナ</label><input type="text" id="user-kana"> </form> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.autoKana.js"></script> <script> $(document).ready(function(){ $.fn.autoKana('#user-name', '#user-kana', {katakana:true}); }); </script> </body> ■jquery.autoKana.js (function ($) { $.fn.autoKana = function (element1, element2, passedOptions) { var options = $.extend( { 'katakana': false }, passedOptions); var kana_extraction_pattern = new RegExp('[^ ぁあ-んー]', 'g'); var kana_compacting_pattern = new RegExp('[ぁぃぅぇぉっゃゅょ]', 'g'); var elName, elKana, active = false, timer = null, flagConvert = true, input; elName = $(element1); elKana = $(element2); active = true; _stateClear(); elName.blur(_eventBlur); elName.focus(_eventFocus); elName.keydown(_eventKeyDown); function start() { active = true; }; function stop() { active = false; }; function toggle(event) { var ev = event || window.event; if (event) { var el = Event.element(event); if (el.checked) { active = true; } else { active = false; } } else { active = !active; } }; function _checkConvert(new_values) { if (!flagConvert) { if (Math.abs(values.length - new_values.length) > 1) { var tmp_values = new_values.join('').replace(kana_compacting_pattern, '').split(''); if (Math.abs(values.length - tmp_values.length) > 1) { _stateConvert(); } } else { if (values.length == input.length && values.join('') != input) { _stateConvert(); } } } }; function _checkValue() { var new_input, new_values; new_input = elName.val() if (new_input == '') { _stateClear(); _setKana(); } else { new_input = _removeString(new_input); if (input == new_input) { return; } else { input = new_input; if (!flagConvert) { new_values = new_input.replace(kana_extraction_pattern, '').split(''); _checkConvert(new_values); _setKana(new_values); } } } }; function _clearInterval() { clearInterval(timer); }; function _eventBlur(event) { _clearInterval(); }; function _eventFocus(event) { _stateInput(); _setInterval(); }; function _eventKeyDown(event) { if (flagConvert) { _stateInput(); } }; function _isHiragana(chara) { return ((chara >= 12353 && chara <= 12435) || chara == 12445 || chara == 12446); }; function _removeString(new_input) { if (new_input.match(ignoreString)) { return new_input.replace(ignoreString, ''); } else { var i, ignoreArray, inputArray; ignoreArray = ignoreString.split(''); inputArray = new_input.split(''); for (i
- ベストアンサー
- JavaScript
- ｊQueryでのclassの操作
現在Wordpressに、文字のサイズを「小・中・大」と変えるjQueryを設置しています。 http://az-store.nrym.org/download/extend/jquery-fontsize-switcher/ Wordressではもともとbodyのclassに指定があるのですが、このjQueryを設置すると removeAttr("class")で削除されてしまいます。 そこで、もともとのClassを活かしたまま文字サイズ変更用のクラスだけを 削除&追加ができればいいのですが、 どうすればよいでしょうか？ ただ、単純に「removeAttr("class")」の記述を削除してしまうと、 文字サイズ変更スイッチを押す度に、クラスが追加され続けるのでそれは避けたいです。 $(function(){ var currentstyle = readCookie('fontStyle'); if (currentstyle){ switchFont(currentstyle); }; $("li.sizeL").click(function(){ switchFont("fontL"); return false; }); $("li.sizeM").click(function(){ switchFont("fontM"); return false; }); $("li.sizeS").click(function(){ switchFont("fontS"); return false; }); }); function switchFont(className){ $("body").removeAttr("class").addClass(className); createCookie('fontStyle', className, 365); }; // cookie script http://www.quirksmode.org/js/cookies.html function createCookie(name,value,days){ if (days){ var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name){ var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; }
- ベストアンサー
- AJAX
- JavaScriptで複数のCSVを取得しひとつのCSVごとに１つのs
JavaScriptで複数のCSVを取得しひとつのCSVごとに１つのselectフォームを表示しようとしております。 以下のようなJSを使っているのですが、aryCsvNameの配列にはいっている名前で複数のCSVを呼び込みたいのですが、 getElementById("select***").のところで、うまく***の箇所に配列の値をもっていけません。 aryCsvNameの値と***があえば、それぞれの<div>に表示されるのではないかとは思っているのですが、 それも予想です。 恐れ入りますが、どなたかいい方法をご教授ください。 function loadCSV() { aryCsvName = ["1","2","5","10"]; for (var j = 0; j < aryCsvName.length; j++) { var path = './data/'+aryCsvName[j]+'.csv'; var httpObj = createXMLHttpRequest(handleResult); if (httpObj) { httpObj.open("GET", path, true); httpObj.send(null); } } } function handleResult() { if ((this.readyState == 4) && (this.status == 200)) { var text = getAjaxFilter()(this.responseText); csvData = parseCSV(text); ///ここが不明 //document.getElementById("select***").innerHTML = result; //ここまで } } function parseCSV(str) { var CR = String.fromCharCode(13); var LF = String.fromCharCode(10); var lines = str.split(LF); var csvData = new Array(); for (var i = 0; i < lines.length; i++) { var cells = lines[i].split(","); if( cells.length != 1 ) csvData.push(cells); } return csvData; } function createXMLHttpRequest(cbFunc) { var XMLhttpObject = null; try { XMLhttpObject = new XMLHttpRequest(); } catch(e) { try { XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { return null; } } } if (XMLhttpObject) XMLhttpObject.onreadystatechange = cbFunc; return XMLhttpObject; } function getAjaxFilter() { if (navigator.appVersion.indexOf("KHTML") > -1) { return function(t) { var esc = escape(t); return (esc.indexOf("%u") < 0 && esc.indexOf("%") > -1) ? decodeURIComponent(esc) : t } } else { return function(t) { return t } } } HTML部分 <div id="select1"></div> <div id="select2"></div> <div id="select5"></div> <div id="select10"></div>
- ベストアンサー
- JavaScript
- jquery returnについて
貴重なスペースをお借りいたします。 jqueryを勉強中前々から調べてもよくわからない部分がございまして、 皆様のお力を貸して頂ければとおもいます。。。 jqueryのreturnについてなのですが、 あやふやな部分が多く、どこで使えるのか、どうゆうときに使うのかということが今だに理解できていないところがございます。 $('#photogallery li .imgArea').hide();//ページ上の画像を隠す $(window).bind("load", function(){ var interval = 300; //表示間隔 for(var i=0; i<$('#photogallery li .imgArea').length; i++) setTimeout(doFade(i), interval * i); function doFade(i){ return function(){ $('#photogallery li .imgArea').eq(i).fadeIn(1000); }; } }); 上記は画像のプリロードをするためのjqueryなのですが、最下部のreturn function～の部分ですね、 なぜreturnで関数を返さないといけないのかがさっぱりわかりません。 doFade(i)でfadeInを実行するならreturnをかかなくてもいいのではないかと思い困惑中です。 物分かりが良い方ではなく、どなたかわかりやすく説明していただける方がいたら、 どうぞ宜しくお願い致します。
- 締切済み
- JavaScript
- jqueryのajax()内からグローバル配列に
jqueryのajax(){success: function()内からグローバル連想配列に値を格納したい。 jqueryのajax()でhtmlファイルを読み込み配列に格納。 その後他の関数で使いたいと考えていますが グローバル連想配列に格納できません。 success: function()内でさらに関数を定義もして見ましたが反応せず。。。 （プルダウンメニューを変更したら実行する関数） 以下ソースになります。 ----------------------------------------------------------- $(function() { objectarray = new Object(); $.ajax({ type: 'GET', url: 'hoge.html', dataType: 'html', success: function(data) { var text = []; $(data).each(function(i){ text = $(this).text().split("\n"); }); var alldata = $.grep(text, function(e){return e;});//空白やデータなしを削除 for(i=0; i<alldata.length; i++){ objectarray[i] = (alldata[i]); alert("forの中" + objectarray[i]);//取得できた } alert("forの外" + objectarray);//取得できた return objectarray;//あってもなくても変わらない。。。 }, error:function() { alert('問題がありました。htmlデータがありませんでした。'); } //return objectarray;←有効にするとjsが認識されなくなります。 }); alert("ajaxの外" + objectarray[0]);//何も表示されない、firebugでみるとobjectarrayには値が入っている。 }); ----------------------------------------------------------- 上記はnew Object()でやっておりますがnew Array()でも同じ結果でした。 回避策をご教授いただけましたら幸いです。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQueryを使ってランダムに表示
jQueryを使って5つのボックス要素を、ランダムに3つ表示させています。 現在はページを読み込むたびに表示を切り替えていますが、これを「一定時間で表示を切り替え」に変更する事は可能でしょうか？ できればjsのみの修正でできれば良いのですが…。 どなたかお助けください。よろしくお願いいたします。 jsとhtmlは以下のようにしています。 jQuery(function($) { $.fn.extend({ randomdisplay : function(num) { return this.each(function() { var chn = $(this).children().hide().length; for(var i = 0; i < num && i < chn; i++) { var r = parseInt(Math.random() * (chn - i)) + i; $(this).children().eq(r).show().prependTo($(this)); } }); } }); $(function(){ $("[randomdisplay]").each(function() { $(this).randomdisplay($(this).attr("randomdisplay")); }); }); }); <div randomdisplay="3"> <div id="box">ランダム1</div> <div id="box">ランダム2</div> <div id="box">ランダム3</div> <div id="box">ランダム4</div> <div id="box">ランダム5</div> </div>
- ベストアンサー
- JavaScript
- 動的ＣＳＶファイルから値なしを削除したい
jqueryについて質問です。とある動的csvファイルからある特定の列を取り出し、grepを使って値のないものを取り除きたいと思っています。しかしunderfindとなってしまいます。どこを修正すればいいのでしょうか？ ちなみにgrepのところを削除すると、「90 247 312 149 360 NaN 110 yMin=90, yMax=360 」という値が返ってきます。 希望は「90 247 312 149 360 110 yMin=90, yMax=360 」という値が返ってきて、最終的には最終行から３つの値、「149 360 110」を取り出したいと考えております。 このcsvファイルは動的で、行数は変化します。 function loadcsv2(url) { if (window.ActiveXObject) { var httpObj = new ActiveXObject("Microsoft.XMLHTTP"); if (httpObj) { httpObj.open("GET","sample2.csv", false); httpObj.send(); } } else if (window.XMLHttpRequest) { httpObj = new XMLHttpRequest(); httpObj.open("GET", "sample2.csv", false); httpObj.send(null); } var rows = httpObj.responseText.split("\r\n"); var dates = new Array(); var items = new Array(); items[0] = new Array(); var result = ""; var n; for (n = 1; n < rows.length; n++) { var fields = rows[n].split(","); if (fields.length < 3) break;//３列目まで dates[n] = fields[0]; items[0][n] = n==0 ? fields[1] : parseInt(fields[1]); var datax = items[0][n] datax = $.grep(datax,function(e){ return e;}); result += datax + "\n" ; } } ===【sample.csv】=== day,sizeA,sizeB 11-19,90,254 11-20,247,261 11-21,312,258 11-24,149,250 11-25,360,215 11-26,,450 11-27,110,196
- ベストアンサー
- JavaScript
- jQueryで困っています。教えてください。
スムーススクロールを導入しようと、いろいろ調べて以下のものを参考にさせていただこうと考えています。どうゆう流れになっているのかを調べて分からないことがあったので投稿させていただきました。var target = jQuery(href == "#" || href == "" ? 'html' : href);この行の意味がわかりません。また、targetに何が代入されているのか分かりません。回答よろしくお願いします。 jQuery-------------------------------------------- //スムーズスクロール jQuery(function(){ // #で始まるアンカーをクリックした場合に処理 jQuery('a[href^=#]').click(function() { // スクロールの速度 var speed = 1000; // ミリ秒 // アンカーの値取得 var href= jQuery(this).attr("href"); // 移動先を取得 var target = jQuery(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール jQuery('body,html').animate({scrollTop:position}, speed); return false; }); });
- ベストアンサー
- JavaScript
補足
早速のご回答ありがとうございます。 サンプルを単純化して、以下の様にしてみました。 <script type="text/javascript"> <!-- $(function(){ $.get("sample.csv",{}, createGraph); }); function createGraph(gData){ var lines = gData.split("\r\n"); var lastdata = lines[(lines.length - 1)].split(","); var htmlText = '<img src="bar.gif" width="'+lastdata[2]/4+'" height="30">'; $("#chart").html(htmlText); } --> </script> CSVの１行目の3列目を読み込むようになりました！ lastdata[2] というところで、３列目を指定しているのですね。（？） それで、CSVなんですが最新データが最終行に追加されるようで、 最終行を読み込むにはどのようにするとよいのでしょうか？ var lastdata = lines[(lines.length - 1)].split(","); の辺りで、行数を分析しているのかな？と想像してみたのですが、 Javascriptのリファレンスを見ると列を分析しているような感じで、 ちょっと詰まってしまいました。 よろしくお願い致します。