PyScript⑪（Plotlyで折れ線グラフ表示）

Plotlyで折れ線グラフ表示

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

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

（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のグラフオブジェクトを、ブラウザ上に表示することができました。