js,plotly를 사용하여sin파의 실시간 그림 & 값을 제시합니다

실시간 드로잉 확장

브라우저 업데이트에 따라 임의의 값을 표시할 수 있습니다

코드 전체 텍스트

20180912_sin.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>sin</title>
    <!-- URL:https://plot.ly/javascript/getting-started/ -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <h1 id="y"></h1>
    <div id ="myDiv"></div>

    <script>
    var t = 0;
    var y = 0;
    var t_array = new Array(); //tの配列
    var y_array = new Array(); //yの配列

    sin();
    function sin(step){
        var t_temp = t++; //localなinstanceを生成
        var y_temp = Math.sin(t_temp/10);
        t_array.push(t_temp); //tの配列に追加
        y_array.push(Math.sin(t_temp/10)); //yの配列に追加
        document.getElementById("y").innerHTML = 'y=' + y_temp.toFixed(2);//yの値を表示(小数点以下2桁に指定)

        var data =[
                    {
                      opacity:0.8,//これは謎
                      type: 'scatter',//散布図に指定
                      mode: 'lines',//マーカーに指定
                      maker:{size:2, color:'rgb(55,122,122)',line:{width:0}},
                      //プロット時間を指定して動作を軽くする
                      x: t_array.slice(t_temp-100,t_temp),
                      y: y_array.slice(t_temp-100,t_temp),
                    }
                  ]
        //重要：x軸のストリーミングに関する設定
        var window = 30; //x軸のウィンドウサイズ
        var t_range_max = t_temp;
        var t_range_min = t_temp-window;
        var minuteView = {
          xaxis:{
            range: [t_range_min,t_range_max]
          }
        };
        Plotly.newPlot('myDiv',data)
        Plotly.relayout('myDiv', minuteView);
    }

    setInterval('sin()',10); //こいつでブラウザを更新
    </script>
</body>
</html>

해설

기초

<!DOCTYPE html>
<html lang="ja">//こいつでjavascriptに指定しているらしい
<head>

header
ここはメタ情報。日本語指定とか、bodyで使用したい外部のjsファイルとかをscrで埋め込んだりする。
今回はplotyのCDN?のURLを埋め込んだ。

</head>
<body>

body
ここに実現したいことをjsで書く

<body>
</html>

[HTML 입문] 헤더와 바디의 뜻과 쓰기
http://programming-study.com/technology/html-header-body/

ploty 정보

이 보도를 참고하였다
plotly로 3D도를 그리다
https://qiita.com/ekzemplaro/items/d88bcca6dcc883107cf4

주위 지정 표시하기

<h1 id="y"></h1>
<div id ="myDiv"></div>

in파를 생성하는 데 사용할 변수를 지정합니다

var t = 0; //時間
var y = 0; //sin波の値
var t_array = new Array(); //tの配列
var y_array = new Array(); //yの配列

함수 처리 및 js 진열에 추가

var t_temp = t++; //tを1ずつ加算する
var y_temp = Math.sin(t_temp/10);//function内でのインスタンス
t_array.push(t_temp); //tの配列に追加
y_array.push(Math.sin(t_temp/10)); //yの配列に追加

브라우저에 y 값 표시

document.getElementById("y").innerHTML = 'y=' + y_temp.toFixed(2);//yの値を表示(小数点以下2桁に指定)

Platty에 포함된 데이터 지정

var data =[
                    {
                      opacity:0.8,//これは謎
                      type: 'scatter',//散布図に指定
                      mode: 'lines',//マーカーに指定
                      maker:{size:2, color:'rgb(55,122,122)',line:{width:0}},
                      //プロット時間を指定して動作を軽くする
                      x: t_array.slice(t_temp-100,t_temp),
                      y: y_array.slice(t_temp-100,t_temp),
                    }
                  ]

작업을 줄이기 위해 드로잉 배열의 값은 흐름 전송 범위(약 30개)로 제한됩니다.

중요: X축 흐름 전송에 대한 설정

        //重要：x軸のストリーミングに関する設定
        var window = 30; //x軸のウィンドウサイズ
        var t_range_max = t_temp;
        var t_range_min = t_temp-window;
        //x軸の表示範囲を定義
        var minuteView = {
          xaxis:{
            range: [t_range_min,t_range_max]
          }
        };

30가지 흐름 전송 감각을 지정했다.

실제 도면 데이터

방금 정의된 MinuteView를 제시합니다.

        Plotly.newPlot('myDiv',data)
        Plotly.relayout('myDiv', minuteView);//先ほど定義したminuteViewを与える

브라우저 10ms 업데이트 후 다음sin () 처리로 들어가기

setInterval('sin()',10); //こいつでブラウザを更新

감상

다음에 나는 더욱 복잡한 함수를 제공하고 싶다.

Reference

이 문제에 관하여(js,plotly를 사용하여sin파의 실시간 그림 & 값을 제시합니다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/zozo/items/0f83821626130d428f6d

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다