PyScript⑪(Plotlyで折れ線グラフ表示)

Plotlyで折れ線グラフ表示

PyScript内から、Plotlyを使って折れ線グラフを表示します。

まずpy-envタグにpandasplotlyを指定し、PyScript内からこの2つのライブラリをインポートします。

(Plotlyライブラリの中ではPandasライブラリを使用しています。)

次にpy-scriptタグ内では、折れ線グラフを表示するグラフオブジェクトを作成し、そのオブジェクトをjson.dump関数でjson化します。

その際、引数にはcls=plotly.utils.PlotlyJSONEncoderを指定するのがポイントです。

json化した図形オブジェクトは、JavaScript内のJSON.parse関数でオブジェクト化し、最後にPlotly.newPlotを使って描画します。

[ソースコード]

plotly1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>
<head>

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>

<py-env>
- pandas
- plotly
</py-env>
</head>

<body>

<div id="chart1"></div>

<script type='text/javascript'>
function plot(graph, chart) {
var figure = JSON.parse(graph)
Plotly.newPlot(chart, figure);
}
</script>

<py-script>
import js, json
import pandas as pd
import plotly
import plotly.express as px

fig = px.line([[1, 1], [2, 5], [3, 4], [4, 8], [5, 2]])
graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
js.plot(graphJSON, "chart1")
</py-script>

</body>
</html>

[ブラウザ表示]

PyScript内で作成したPlotlyのグラフオブジェクトを、ブラウザ上に表示することができました。