이 글은 주로 플롯리(plotly.js) 드로잉 라이브러리의 상세한 입문 튜토리얼을 소개하고 있습니다.
이 글에서는plotly.js 그리기 라이브러리의 입문 튜토리얼을 소개하고 모든 사람과 공유합니다. 세부 내용은 다음과 같습니다.
Plotly
Origin
수학 함수 이미지를 프런트 엔드에 표시하고 싶습니다. 이틀이면 성숙한 js 라이브러리가 있어야 할 것 같아요.
그래서 간단하게 시도해보았습니다.
드디어plotly.js를 사용하기로 결정했습니다. function-plot 등 다른 것들도 괜찮아 보이는데 시간나면 살펴보겠습니다.
Plotly
plotly.js는 Plotly를 지원하는 오픈 소스 JavaScript 그래프 라이브러리입니다.
Plotly는 현재까지 최고의 그래프 라이브러리라고 할 수 있습니다. ㅋㅋㅋ 수학적 이미지 그리기의 예입니다. 예를 들어 y = 2*x+1은 실제로 일련의 (x,y) 점을 연결하여 형성된 이미지입니다.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>plot 绘制图像</title>
</head>
<body>
<p id="tester" style="width:600px;height:250px;"></p>
</body>
<script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script>
<!-- test -->
<script>
TESTER = document.getElementById('tester');
Plotly.plot(TESTER, [{
x: [1, 2, 3, 4, 5],
y: [1, 2, 4, 8, 16]
}], {
margin: {t: 0}
});
</script>
</html>
Effect
Function image위 내용은 앞으로 모든 분들께 도움이 되길 바랍니다.
관련 글:
webpack 프로젝트를 통해 디버깅 및 독립 패키징 구성 파일을 구현하는 방법(자세한 튜토리얼)
vue-cli+webpack 프로젝트를 통해 프로젝트 이름을 수정하는 방법
방법 vue 컴포넌트에서 글로벌 등록과 로컬 등록을 구현합니다위 내용은 plotly.js 드로잉 라이브러리 사용 튜토리얼의 자세한 해석(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!