Interprétation détaillée du didacticiel d'utilisation de la bibliothèque de dessins plotly.js (tutoriel détaillé)-js tutoriel-php.cn

Interprétation détaillée du didacticiel d'utilisation de la bibliothèque de dessins plotly.js (tutoriel détaillé)

亚连

Libérer： 2018-06-04 17:48:00

original

6126 Les gens l'ont consulté

Cet article présente principalement le tutoriel d'introduction détaillé de la bibliothèque de dessins plotly.js. Maintenant, je le partage avec vous et le donne comme référence.

Cet article présente le tutoriel d'introduction de la bibliothèque de dessins plotly.js et le partage avec tout le monde. Les détails sont les suivants :

Plotly

<.>Origine

Au cours des deux derniers jours, je souhaite afficher des images de fonctions mathématiques sur le front-end. Je suppose qu'il devrait y avoir une bibliothèque js mature.

Alors, je l'ai simplement essayé.

Enfin, j'ai décidé d'utiliser plotly.js. D'autres, comme function-plot, ont également l'air bien, j'y jetterai un œil quand j'aurai le temps.

Plotly

plotly.js est la bibliothèque graphique JavaScript open source qui alimente Plotly.

Plotly peut être considérée comme la meilleure bibliothèque graphique à ce jour. , pas l'un d'entre eux.

Cas simple

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(&#39;tester&#39;);
  Plotly.plot(TESTER, [{
    x: [1, 2, 3, 4, 5],
    y: [1, 2, 4, 8, 16]
  }], {
    margin: {t: 0}
  });
</script>
</html>

Copier après la connexion

Effet

Trac de points

Dessiner des images mathématiques

Principes du dessin d'images mathématiques. Par exemple, y = 2*x+1 est en fait une image formée en connectant une série de points (x, y).

Code

<p id="math-function" style="width:600px;height:250px;"></p>
<script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script>

<script>
  TESTER = document.getElementById(&#39;math-function&#39;);

  var x = [], y = [];

  for(var i = -10; i < 10; i += 1) {
    x.push(i);
    y.push(2*i+1);
  }

  Plotly.plot(TESTER, [{
    x: x,
    y: y
  }], {
    margin: {t: 0}
  });
</script>

Copier après la connexion

Effet

Images de fonctions

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment implémenter le débogage et les fichiers de configuration d'empaquetage indépendants via des projets Webpack (tutoriel détaillé)

Par vue -Comment modifier le nom du projet dans le projet -cli+webpack

Comment implémenter l'enregistrement global et l'enregistrement local dans le composant vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Interprétation détaillée du didacticiel d'utilisation de la bibliothèque de dessins plotly.js (tutoriel détaillé)