グラフを出力させたい

前提・実現したいこと

htmlとjavascriptとpythonを用いてグラフを（比例・反比例・一次関数・平行移動しない二次関数）書きたい。javascriptのprompt関数で式を読み込みpythonでweb上でグラフを表示させたい。エラーコードを見ても、どこのエラーかわからないので、どこがおかしいのか教えてください。実現したいこと：インターネット環境がないところでも、グラフを使って説明できるようなシステムを作りたい。
ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

グラフが出力されない

エラーメッセージ
import numpy as np import matplotlib.pyplot as plt x = np.linspace(0, 1, 100) plt.figure(0) plt.plot(x, 4*x*(1-x)) plt.show()

### 該当のソースコード

``PythonとJavascriptと(HTML)
ソースコード<html>
<head><tiitle>
</head></tittle>

<body>
<script>
alert('関数の式を入力');
fu=prompt('関数の式を入力');
</script><py>
import numpy as np
import matplotlib.pyplot as plt
x = np.linspace(0, 1, 100)
plt.figure(0)
plt.plot(x, 4*x*(1-x))
plt.show()
</py></body></html>


### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）
windows10のメモ帳で作っています。
参考サイト：https://qiita.com/tobira-code/items/3b2322bf87464a36dfe6
ここにより詳細な情報を記載してください。

meg_

2021/02/27 17:01

> エラーコードを見ても、どこのエラーかわからないので、どこがおかしいのか教えてください。 ”エラーコード”とは何を指していますか？その”エラーコード”はどうやって確認されたのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

ためしてみました。

graph.thml
1<html>
2<head><tiitle>
3</head></tittle>
4
5<body>
6<script>
7alert('関数の式を入力');
8fu=prompt('関数の式を入力');
9</script><py>
10import numpy as np
11import matplotlib.pyplot as plt
12x = np.linspace(0, 1, 100)
13plt.figure(0)
14plt.plot(x, 4*x*(1-x))
15plt.show()
16</py></body></html>

をブラウザで表示してみると、
まず、

の画面が出て、次に

の画面が出ます。

htmlに書かれたとおりに動いています。

どうしたら、グラフが書けますでしょうか？

htmlで書かれた文字列はサーバが送り出します。
それを受け取ったブラウザがpythonを呼び出すことは出来ないようになっています。理由はセキュリティです。JavaScriptのようにセキュリティを考えて設計された処理系ですがPythonはそうではないからです。近い将来にこれが変わることはないでしょう。
従って、pythonを使ってグラフを書くことをブラウザ側でやることは無理があると思います。

ブラウザでの入力をサーバ側で受取り、サーバ側のpythonが画像ファイルを生成して、cgiを使ってブラウザに表示するのが現実的だろうと思います。

これを実現するためにはflaskやdjangoを使うようですが、私は経験がないのでどれが良いのかはわかりません。

投稿2021/02/27 22:48

編集2021/03/01 12:00

ppaul

総合スコア24670

退会済みユーザー

2021/02/28 12:51

ご回答ありがとうございます。グラフを作成する方法を検索しますと、plot関数(python)が出てきます。しかし、plot関数を使うにはmatplotlibライブラリをインストール必要があると記述されていました。もし、そのライブラリをインストールする必要があるのならば、どのデバイスでも動くとは限りません。どうしたら、グラフが書けますでしょうか？このサイトの運営方針"作業依頼のような投稿をして課題や仕事を無償でやってもらう場所ではありません。"は、十分理解しています。