Как изменить положение с абсолютного на относительное в диаграммах в ChartJS - PullRequest
Новая
       164

Как изменить положение с абсолютного на относительное в диаграммах в ChartJS

0 голосов
/ 27 мая 2020

Мне нужно преобразовать положение по умолчанию двух диаграмм в диаграмме js из абсолютного в относительное. Изучив элементы браузера, я увидел, что это можно изменить. Затем я попытался изменить положение div на относительное, как показано ниже, но это не изменило положение диаграммы. 

<div class="col-xs-6 col-sm-6 d-flex flex-column" style="background-color: ghostwhite;">
    <div id="barChartContainer1" style="height: 100%; width: 100%;  padding: 10px;  display: block; position: relative;"></div>
    <div id="barChartContainer2" style="height: 100%; width: 100%;  padding: 10px;  display: block; position: relative;"></div>
    <div id="barChartContainer3" style="height: 100%; width: 100%;  padding: 10px;  display: block; position: relative;"></div>
</div>

три диаграммы накладываются друг на друга. Я попытался изменить сценарий java следующим образом, но он не дал той работы, которую я ожидал. 

var chart1 = new CanvasJS.Chart("barChartContainer2", {
  animationEnabled: true,
  position: "relative",
  height: 600,
})

Может ли кто-нибудь помочь мне с этим?

1 Ответ

0 голосов
/ 27 мая 2020

Вы можете попробовать реализовать дизайн Flexbox в CSS3: 

#container{
  display: flex;
  flex-direction: row;
}
<!DOCTYPE html>
<html>
<body>
<div id="container">
  <div style="height: 100%; width: 100%;  padding: 10px; background-color: red;"></div>
  <div style="height: 100%; width: 100%;  padding: 10px; background-color: blue;"></div>
  <div style="height: 100%; width: 100%;  padding: 10px; background-color: green;"></div>
</div>
</body>
</html>

Если это не сработает, это обязательно: 

var chart = new CanvasJS.Chart("chart1",
    {
        animationEnabled: true,
        title: {
            text: "Chart 1"
        },
        axisX: {
            interval: 10,
        },
        data: [
        {
            type: "splineArea",
            color: "rgba(255,12,32,.3)",
            dataPoints: [
                { x: 1, y: 10 },
                { x: 2, y: 30 },
            ]
        },
        ]
    });
chart.render();

var chart = new CanvasJS.Chart("chart2",
    {
        animationEnabled: true,
        title: {
            text: "Chart 2"
        },
        axisX: {
            interval: 10,
        },
        data: [
        {
            type: "splineArea",
            color: "rgba(32,255,12,.3)",
            dataPoints: [
                { x: 1, y: 10 },
                { x: 2, y: 20 },
            ]
        },
        ]
    });
chart.render();

var chart = new CanvasJS.Chart("chart3",
    {
        animationEnabled: true,
        title: {
            text: "Chart 3"
        },
        axisX: {
            interval: 10,
        },
        data: [
        {
            type: "splineArea",
            color: "rgba(12,32,255,.3)",
            dataPoints: [
                { x: 1, y: 30 },
                { x: 2, y: 1 },
            ]
        },
        ]
    });
chart.render();
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chart1" style="height: 100%; width: 30%;  display: inline-block;">   </div>
<div id="chart2" style="height: 100%; width: 30%;  display: inline-block;"></div>
<div id="chart3" style="height: 100%; width: 30%;  display: inline-block;">
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...