1

プロットを含む多数のインライン ブロック div があります。今のところ、それらすべてを同じプロットの個別のインスタンスに接続しますが、最終的には区別されます。

それらをスタイルしようとすると、たとえば

padding: 10px;
border: 1px solid gray;

Plotly は二重の境界線を表示し、パディングを無視します。

ここに画像の説明を入力

もちろん、プロット div を外側の div でラップしてスタイルを設定することもできますが、プロット div、つまり Plotly.plot によって取得される ID を持つ div を作成する方法が必要であり、独自のことを行うのではなく、一般的な CSS に従います。 ?

Transcrypt Python to JavaScript コンパイラーとプレーンな plotly.js ライブラリーを、リモートのものを一切使用せずに使用しています。コードは次のとおりです。

HTML:

<html>
    <head>
        <style>
            div {
                display: inline-block;
                overflow: hidden;
                box-sizing: border-box;
                padding: 10;
                width: 500;
                height: 500;
                border: 1px solid gray;
            }
        </style>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    </head>
    <body>
        <div id="lin"></div>
        <div id="log"></div>
        <div id="polar"></div>
        <div id="ribbon"></div>
        <div id="wireframe"></div>
        <div id="surface"></div>
        <div id="bar"></div>
        <div id="pie"></div>
        <div id="gant"></div>

        <script src="__javascript__/plotly_demo.js"></script>
    </body>
</html>

パイソン:

__pragma__ ('jskeys')   # For convenience, allow JS style unquoted string literals as dictionary keys

import numscrypt
import math

xValues = [2 * math.pi * step / 200 for step in range (201)]
yValues = [math.sin (xValue) + 0.5 * math.sin (xValue * 3 + 0.25 * math.sin (xValue * 5)) for xValue in xValues] 

for id in ('lin', 'log', 'polar', 'ribbon', 'wireframe', 'surface', 'bar', 'pie', 'gant'):
    Plotly.plot (
        document.getElementById (id),
        [{
            x: xValues,
            y: yValues
        }],
        {
            margin: {t: 0}
        }
    )
}
4

1 に答える 1