コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > Lotly.js プロット ライブラリの入門チュートリアルの共有

Lotly.js プロット ライブラリの入門チュートリアルの共有

小云云
リリース： 2018-02-24 09:01:04
オリジナル
2597 人が閲覧しました

この記事では、plotly.js 描画ライブラリの詳細な入門チュートリアルを主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

Plotly

Origin

ここ 2 日間、フロントエンドに数学関数の画像を表示したいと考えていました。成熟した JS ライブラリがあるはずだと思います。

それで、簡単に試してみました。

最終的には、plotly.js を使用することにしました。function-plot なども良さそうです。時間があれば見てみましょう。

Plotly

plotly.js は、Plotly を強化するオープンソースの JavaScript グラフ作成ライブラリです。

Plotly は、間違いなく、これまでで最高のグラフ作成ライブラリと言えます。

簡単なケース

コード


<!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>
ログイン後にコピー

効果

点プロット

数学的画像描画の原理。たとえば、y = 2*x+1 は、実際には一連の (x,y) 点を接続することによって形成される画像です。

コード

<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>
ログイン後にコピー

効果

関数イメージ

関連推奨事項:


Pythonがplotlyを使用してデータチャートを描画する方法の事例(画像とテキスト)を共有します

以上がLotly.js プロット ライブラリの入門チュートリアルの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
javascript 入門チュートリアル
ソース：php.cn
前の記事：JavaScriptコンストラクターの詳しい説明 次の記事：子コンポーネントは親コンポーネントのメソッド インスタンスを呼び出します。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート