Flash+axios+Platly로 aax 그래프 그리기
개요
Ajax의 학습으로 서버측 처리 데이터의 결과를 Flash로 API를 실현하고 브라우저의 Plattly로 도표화합니다.
서버측(Flashs)
이번에는 두 호스트 index의 API와 JSON으로 처리 결과를 보내는 API를 제작했다.전자는 > 과 브라우저 측의 코드와 같은 정적 내용을 발표할 것이다.후자는 (x, y)의 무작위 수 집합을 100개의 JSON으로 압축하여 전송한다.
app.py
# appの定義とかエントリーポイントは略
@app.route("/")
def app_route():
return app.send_static_file("index.html")
@app.route("/api/data")
def app_sequence():
return json.dumps(
{
"x": np.random.random(100).tolist(),
"y": np.random.random(100).tolist(),
}
)
json.dumps해.브라우저 측면(},javascript)
html
Plattly 및 axios를 미리 로드합니다.
<html>
<head>
<script src="public/javascripts/main.js"></script>
<script src="https://cdn.plot.ly/plotly-2.4.2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="mygraph"></div>
</body>
</html>
javascript
axios에서 Flash에서 만든 API를 두드려 데이터를 얻고 mygraph 영역에 퍼즐을 그립니다.
window.onload = () => {
scatter();
};
let scatter = () => {
const mygraph = document.getElementById('mygraph');
axios.get("/api/data")
.then((res) => {
Plotly.newPlot(mygraph, [{
x: res.data.x,
y: res.data.y,
mode: 'markers',
type: 'scatter',
}], {
margin: { t: 0 }
});
});
}
scatter는 창에 불러오기가 완료된 후에야 완성할 수 있습니다.브라우저 옆에 있는 자바스크립트의 외부 프로그램 라이브러리도 DOM의 스크립트 탭으로 읽을 수 있기 때문에 plotly의 스크립트 탭을 읽은 후에 이 JS 코드를 읽을 수 없으면 not found가 됩니다.초보일지도 모르지만 앞머리를 잘 쓰지 않아서 좀 막혔어요.실행 결과
app.py 접근localhost: 50000을 실행하면 다음 퍼즐을 출력합니다.다시 로드할 때마다 시점의 위치가 변경됩니다.
Plattly가 꼬르륵꼬르륵 이동하고 초점을 맞출 수 있기 때문에 편리한 그림 라이브러리라고 생각합니다.
Reference
이 문제에 관하여(Flash+axios+Platly로 aax 그래프 그리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/bluepost/articles/e325fde020f2d3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
