Блог

Главная - Вопросы по программированию - Как я могу оформить отступы и границы графика из простого css

Как я могу оформить отступы и границы графика из простого css

#css #plotly #transcrypt

#css #plotly #транскрипция

Вопрос:

У меня есть несколько встроенных блоков с графиками в них. На данный момент я подключаю их все к отдельным экземплярам одного и того же графика, но в конце они будут разными.

Когда я пытаюсь их стилизовать, например

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

Plotly создает двойную границу и игнорирует мои отступы.

введите описание изображения здесь

Конечно, я мог бы обернуть plotly divs во внешние divs и оформить их, но наверняка должен быть способ сделать plotly divs, то есть divs с идентификатором, который выбирается Plotly.plot, подчиняться общему CSS, а не делать что-то свое?

Я использую компилятор Transcrypt Python для 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}
        }
    )
}

Ответ №1:

Я обновил вашу разметку. Оберните ваши графические разделы .wrapper элементом для упрощения форматирования. Встроенные блочные элементы создают некоторое пространство на экране, вы можете предотвратить это, просто используя свойство CSS float . Не забудьте очистить значение float, чтобы предотвратить свертывание родительского элемента, как я сделал в обновленном коде. Я также применил некоторое отрицательное поле, чтобы избавиться от двойной границы:

 <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

Комментарии:

1. Я пробовал ваш HTML, но я все еще получаю двойные границы, а отступ размером 10 пикселей игнорируется. То, что мне нужно, — это однолинейная граница вокруг каждого графика, как указано в CSS.

2. Просто скопируйте и вставьте этот код в пустой HTML-файл и просмотрите эту страницу в браузере. Вы поймете, что я пытаюсь сказать.

3. Это именно то, что я сделал. Я открыл пустой файл и скопировал в него ваш html. Затем загрузил его в браузер. Графики теперь смежны, чего я не хочу, но все же граница — это не одна строка, а поле в поле для каждого графика. Так что все в порядке, если у каждого графика есть своя отдельная граница, а не границы, которые объединяются. Но я бы хотел одну единственную границу на график. Прямо сейчас есть тонкая внешняя граница и внутренняя граница, левая и верхняя стороны которых имеют размер 2 пикселя, а не один, создавая своего рода эффект тени.