• 締切済み

ソースファイルの処理ロジックについて(文字上の関係で不明点抜粋のみですが)

この部分では何の処理をしているか、教えていただきたいのです function graphArea(start, end){ var size = (end - start) / DAY_LENGTH; var base = document.getElementById("base"); var area = document.createElement("div"); var pointsX = [ START_POINT.LEFT, START_POINT.TOP, (START_POINT.LEFT + size * DATE_SCALE + MARGIN.X / 2), START_POINT.TOP ] var pointsY = [ START_POINT.LEFT, (MARGIN.Y * 3 / 2 + AMPLITUDE * 2), START_POINT.LEFT, (MARGIN.Y / 2) ] area.className = "graphArea"; base.style.width = area.style.width = size * DATE_SCALE + MARGIN.X * 2; base.style.height = area.style.height = (AMPLITUDE + MARGIN.Y) * 2; area.appendChild(polyline(pointsX, LINE_COLOR.AXIS, "classic")); area.appendChild(polyline(pointsY, LINE_COLOR.AXIS, "classic")); base.removeChild(base.firstChild); base.appendChild(area); var basePosition = getAbsolutePosition(base); for(var i=1; i<=size; i++){ var isDelegDay = i % 5 == 0; var sublinePoints = [ (START_POINT.LEFT + DATE_SCALE * i), START_POINT.TOP, (START_POINT.LEFT + DATE_SCALE * i), (START_POINT.TOP - SUBLINE_LENGTH * (isDelegDay ? 2 : 1)) ] area.appendChild(polyline(sublinePoints, LINE_COLOR.AXIS)); if(isDelegDay){ var label = document.createElement("span"); label.className = "pointLabel"; label.style.top = (basePosition.top + START_POINT.TOP - SUBLINE_LENGTH * 2 + LABEL_OFFSET.Y) + "px"; label.style.left = (basePosition.left + (START_POINT.LEFT + DATE_SCALE * i) + LABEL_OFFSET.X) + "px"; label.appendChild(document.createTextNode(i)) area.appendChild(label); } } return area; }

みんなの回答

  • NTJ
  • ベストアンサー率44% (46/103)
回答No.1

何処から引っ張って着たのかは存じませんが、大文字で書かれた定数らしきものの定義が不明なので、回答は難しいです。 ただ・・・ var label = document.createElement("span"); label.className = "pointLabel"; label.style.top = (略) + "px"; label.style.left = (略) + "px"; label.appendChild(document.createTextNode(i)) area.appendChild(label); という記述があるので、 「何かの計算」の結果、表示幅に合わせた、SPANエレメントで作った棒グラフを表示してるのではないかと思われます。 ソース全体を見て、大文字で書かれた定数らしきものを実数へ置き換えて行けば、処理内容が見えるのではないかと思います。 ・・・しかし・・・ createElement 使いまくりで美しくない処理ですねぇ・・・ もーちょっと美麗な手法が有りそうに思いますので、破棄して作り直した方が宜しいのではなかと思われます。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 複数canvasを表示状態のまま一つの画像に

    先だってchart.js4.2でカラー設定をする方法(https://okwave.jp/qa/q10117946.html)で複数グラフを上1、下3できれいに配置する方法を教えてもらいました。そのコードに今まで2.9系で上下2個づつの配置表示したものを一つの画像にする下記のコードを加え試しましたが使えませんでした。 function imageDownload() { var chartWidth = 350; var chartHeight = 242; var imageType = "image/png" var imageFileName = "chart.png"; var bufferCanvas = document.createElement("canvas") bufferCanvas.width = chartWidth * 1.82; bufferCanvas.height = chartHeight * 2.2; bufferCanvas.style.display = "none"; document.body.appendChild(bufferCanvas); var ctx = bufferCanvas.getContext("2d"); // 背景色を設定(しない場合は透過) ctx.fillStyle = "rgb(255, 255, 255)"; ctx.fillRect(0, 0, bufferCanvas.width, bufferCanvas.height); // グラフを貼り付け for (i = 1; i <= 4; i++) { ctx.drawImage( document.getElementById("myChart" + i), i % 2 == 1 ? 0 : chartWidth, i <= 2 ? 0 : chartHeight ); } var imageURL = bufferCanvas.toDataURL(imageType); そこで、スタイル設定のボックスを無くし下記のように配置するようにしました。 <div class="row" style="width:100%;" > <div class="chart1" style="position: relative; top: 0; right: 0; left: 0; margin:0;" >c <canvas id="myChart1" width="400px" height="230px"></canvas></div> <div class="chart2" style="position: absolute; top: 300px; right: 0; left: 0; margin:0;" > <canvas id="myChart2" width="210px" height="210px"></canvas></div> <div class="chart3" style="position: absolute; top: 300px; right: 0; left:215px; margin:0;"> <canvas id="myChart3" width="210px" height="210px"></canvas></div> <div class="chart4" style="position: absolute; top: 300px; right: 0; left:430px; margin:0;"> <canvas id="myChart4" width="210px" height="210px"></canvas></div> </div> しかしながらこの画像化コードでは上下に2個配置するようになっているため大きさの違う上のグラフと下の最初のグラフが左右に一部重なって描画される結果となりました。 そこで、任意の配置状態を保ったまま一つの画像とする方法をお教えください。

  • 最速コードに挑戦!?

    BASICを思い出してPSETを書いてみました。 LINE文を作りたいのですが、最速になるアルゴリズムをご存知の方は いらっしゃいますか? <html> <body> <input type="button" value="Test C.G." onClick=" for(i=0;i<3800;i+=.5){ pset(350-Math.cos(i*3.14519/90)*300,350-Math.sin(i*3.14519/85)*300,'#f00'); } "> <script> function pset(x,y,c){ var p = document.createElement('div'); with(p){ style.position='absolute'; style.top=x+'px'; style.left=y+'px'; style.color=c; appendChild(document.createTextNode('.')); } document.body.appendChild(p); } </script>

  • スタイルシートの横並びリスト中央配置について

    #Area_Navi { margin: 0; padding: 0; } #Area_Navi ul { margin-left: auto; margin-right: auto; text-align: center; list-style-type: none; list-style-position:inside; } #Area_Navi li { text-align: center; display: inline; padding: 0; margin-left: auto; margin-right: auto; float: left; width: 200px; } #Area_Navi a { display: block; border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; background-color: #FFFFFF; font-size: 20pt; padding: 3px; text-decoration: none; color: #000000; margin: 1px 0px; text-align: center; } スタイルシートは上記なのですが、うまく中央配置されず 半端に左寄せになっています。 windows7 firefox を使用しています。 調べて position:relative; と記載しても上手く中央寄せになりませんでした。 どなたか、教えて頂けませんか。 宜しくお願い致します。

    • ベストアンサー
    • CSS
  • サンプル用紙をいただいて、そっくり作成してほしいといわれましたが・・・

    サンプル用紙には、どこかのHPの画面なのですが margin,padding,行間をそっくりに作成したいのですが・・うまくできません。 1. イラストレータで、サンプル用紙の画像を取り込みました。 2. スケールにて、文字高とか行間とかマージンをスケールしました。 3. cssにて、margin-top,margin-bottom, line-height,などを設定しましたが、作成した画面を イラストレータで取り込みスケールしましたが、文字のborder要素部分っていうんでしょうか?この部分がずれてしまっています。 たとえばですが。 <div id="header"> <P>もろもろもろを提案します。</p> <ul> <li>HOME</li> <li>BACK</li> </ul> </div> --css-- div#header{margin-left:23px;} div#header p{margin-top:7px;} div#header li{float:left;} とりあえず、書いてみました。 わからないのは、実際のサンプル用紙をスケールした場合には、上記のような px になるのですが。 実際に作成したものをスケールすると  margin-leftが、22pxになってしまったり、 margin-topが、9pxになってしまいます。 あと、floatした場合、スケールの考え方もわかりません。 文字高や 行高 border の考え方を教えていただければと思います。 あと、イラストレータでスケールしてそのままpx入力するのは間違っているのでしょうか? いろいろ書いてしまいましたが、よろしくご指導ください。

  • スタイルシートのレイヤーに乗せた画像を動的に表示する方法

    <div id="test" style="position=absolute; top=400px; left=200px; z-index=10;"><img src="gazou.gif"></div> 上記を動的に表示するために以下の方法を考えました var element = document.createElement('div'); element.id = "test"; element.style = "position=absolute; top=400px; left=200px; z-index=10;"; element.innerHTML = '<img src="gazou.gif">'; var objBody = document.getElementsByTagName("body").item(0); objBody.appendChild(element); しかしこれだと、element.style = "position=absolute; top=400px; left=200px; z-index=10;"; の部分がまずいらしく動作しません。 どのようにすればよいでしょうか。 よろしくお願いします。

  • スクロールバーによって表示がズレます。

    下記のようにCSSを書きました。 topとしてテーブルクラス指定した中に、areaの領域をとって内容を流し込んでいるのですが、ブラウザにスクロールバーがつく場合とつかない場合とで表示が中央からスクルーロバー分、広くなったり狭くなったりします。(IEはOKなのですが・・・) どうすれば表示がずれないようにできるでしょうか。 --------------------------------- body { margin-top: 0; margin-right: auto; margin-left: auto; margin-bottom: 0; padding: 0; color: #333333; text-align: center; background-color: #FFFFFF; } #area { padding-top: 2px; padding-bottom: 30px; padding-left: 10px; padding-right: 10px; } table { margin: 0; padding: 0; } table.top { margin-top: 5px; margin-right: auto; margin-left: auto; margin-bottom: 0; width: 780px; text-align:center; background-color: #FFFFFF; } table.top td { text-align:left; vertical-align: top; }

    • ベストアンサー
    • HTML
  • ツリー型の目次作成

    ツリー型の目次を作成しているのですが、IEでは動作するのですが、ネスケではエラーになってしまいます。 うまく動作させる方法はないでしょうか? 下記がソースです。 <html> <head> <title>目次</title> <style type="text/css"> div.h_ {margin-left:0px;margin-top:6px;} div.h {margin-left:28px;margin-top:6px;} div.sy_ {margin-left:28px;margin-top:6px;} div.sy {margin-left:56px;margin-top:6px;} div.st_ {margin-left:56px;margin-top:6px;} div.st {margin-left:84px;margin-top:6px;} div.k_ {margin-left:84px;margin-top:6px;} div.k {margin-left:112px;margin-top:6px;} } </style> <script language="JavaScript"> <!--// function displayMokuji(obj, img) { alert("displayMokuji"); if (!obj || !img) alert("bbb"); return; } if (obj.style.display == "none") { obj.style.display =""; img.src ="./open.gif"; } else { obj.style.display ="none"; img.src = "./close.gif"; } return; } //--> </script> </head> <body text="#000000" link="#0000ff" alink="#ff0000" vlink="#0000ff"> <div class="h_"> <a onclick="javascript:displayMokuji(hi0100000000, ii01000000);" href="#"> <img id="ii01000000" src="./close.gif" border="0"></a>  <b>第1編 </b> </div> <div id="bbb" style="display:none"> <div class="sy"> <b>第1章</b> </div> <div class="sy"> <b>第2章</b> </div> </div> </body> </html>

  • ウインドウサイズを変更してもつねにセンタリング

    大変困ってますので、どなたか知恵を貸していただけないでしょうか? Divで作ったレイヤーを画面サイズをユーザーが変更してもつねに中央に表示させるJAVAスクリプトで躓いています。 <script> function center(target) { var screenWidth = window.innerWidth; var layerWidth = document.getElementById("base").style.width; var diff = (screenWidth - layerWidth) / 2 ; if (diff <= 0) diff = 0; document.getElementById("base").style.left = diff; } </script> <style> #base { overflow: auto; position: absolute; width: 459; height: 344; z-index: 1; left: 269; top: 158; background-color: #FF6666; } </style> という、スクリプトを作ってみたのですが、上手く作動しません。 何方か、上記記述の修正をどうぞ、宜しくお願いします! (まったく別の方法でもかまいません…)

  • HTMLについて

    現在HTMLを勉強しています そこで画像の配置についてわからないところがあるので教えてください 添付した画像のようにしたいのですが緑の画像がかなりしたになってしまいます どうすればいいでしょうか? コードとCSSは HTML <body> ~~~省略~~~ <div class="menu_block"> <table class="menu_left"> <tr> <td class="photo"><img src="img/siri-zu.gif" style="margin-top:80px;"></td> </tr> <tr> <td class="photo"><img src="img/sekkenn.gif" style="margin-top:20px;"></td> </tr> <tr> <td class="photo"><img src="img/oiru.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/jeru.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/set.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/mini.gif"style="margin-top:10px;"></td> </tr> </table> <img src="img/3.gif" height="300" alt="3STEP" class="menu_right"> <img src="img/rank.jpg" style="margin-top: 80px ;" class="ranking"> <img src="img/test.jpg" width="600" height="200" style="margin-left: 200px;" class="rebyu"> </div> </div> </body> CSS @charset "UTF-8"; h1 { margin: 30px 0 30px 0; padding: 0 0 0 0; line-height: 0; text-align: center; } #wrapper { width: 1050px; margin: 0 auto 0 auto; } .menu_block { overflow: hidden; zoom: 1; } .menu_left { float: left; margin-right: 20px; } .menu_right { float: left; margin-top: 80px; margin-left: 20px; } .ranking { float: left; margin-left: 20px; } .rebyu { float: left; margin-top: 10px; } です 赤の真下に緑が来るというのが理想です

    • ベストアンサー
    • HTML
  • 横線の書き方

    CSSを使って横線を記述しようとしています。 こんな感じで書きました。 css------------------- .udl5 { margin-right: 5px; margin-left: 5px; margin-top: 3px; margin-bottom: 1px; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-width: 1px; border-top-style: solid; border-top-color: #666666; border-bottom-style: none; border-bottom-width: 0px; width: 600px; height: 1px; } ----------------------------------------------- html------------------------------------------- <div class="udl5"></div> ----------------------------------------------- こんな感じで記述したのですがIE7ではちゃんと 表示されるのですが、IE6だと線の下に10pxぐらいの 空欄ができてしまいます。 なぜでしょうか? もし知っている方がいれば教えていただければと思います。 よろしくお願いします。

プリンタが毎回白紙になる
このQ&Aのポイント
  • 私のプリンタ(DCP-J414ON)は毎回印刷すると白紙になります。どうすれば解決できますか?
  • 私のプリンタ(DCP-J414ON)が印刷するときに白紙しか出力されません。どうすれば改善できますか?
  • プリンタのモデルはDCP-J414ONで、印刷するといつも白紙になります。問題の解決方法を教えてください。
回答を見る