1

我有许多内联块 div，其中包含绘图。现在我将它们全部连接到同一情节的不同实例，但最终它们将是不同的。

当我尝试为它们设计样式时，例如

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

Plotly 提出了一个双边框并忽略了我的填充。

在此处输入图像描述

当然，我可以将 plotly div 包装在外部 div 中并设置它们的样式，但肯定有一种方法可以制作 plotly 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>

Python：

__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

0

我已经更新了你的标记。用一个元素包裹你的图表 div，.wrapper以便于格式化。float内联块元素在屏幕上创建一些空间，您可以简单地使用 CSS属性来防止这种情况。不要忘记清除浮动以防止父级崩溃，就像我在更新的代码中所做的那样。我还应用了一些负边距来摆脱双边框：

<html>
<head>
<style type="text/css">
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .wrapper{
        padding: 1px 0 0 1px;
    }
    .wrapper div {
        float: left;
        overflow: hidden;
        box-sizing: border-box;
        padding: 10px;
        width: 500px;
        height: 500px;
        border: 1px solid gray;
        margin-top: -1px;
        margin-left: -1px;
    }
</style>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <div class="wrapper clearfix">
        <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>
    </div>
    <script src="__javascript__/plotly_demo.js"></script>
</body>
</html>

您可以查看此页面以了解.clearfix实际工作原理 - http://www.tutorialrepublic.com/css-tutorial/css-alignment.php

于 2016-10-04T11:27:52.160 回答