Мой холст / график переходит влево после создания объекта - PullRequest
Новая
       4

Мой холст / график переходит влево после создания объекта

0 голосов
/ 04 апреля 2020
График

. js отлично, и я создаю свой первый график. Но у меня есть одна проблема, которую я не могу понять. После создания объекта мой холст / график переходят влево, хотя я имею текстовый центр с помощью bootstrap4. Холст в самом начале тоже в нужном месте. Код, воспроизводящий проблему:

html: 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Test</title>
    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
    <div class="container-fluid">
        <div class="col-sm-12">
            <div id="my_graph" class="col-sm-12 text-center">Graph: <br></div>
            <button id="test_button" type="button" class="btn btn-primary">test_button</button>
        </div>
    </div>

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- Bootstrap validator -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
    <!-- chart.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
    <!-- Import custom JavaScript -->
    <script src="./js.js"></script>
</body>

</html>

И js: 

$(document).ready(function () {
    $('#my_graph').append('<canvas id="myCanvas" width="100" height="100" style="border:1px solid #000000">');
});

$('#test_button').click(function (event) {
    drawGraph();  
})

function drawGraph() {
    var ctx = document.getElementById('myCanvas');
    myLineGraph = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [0],
            datasets: [{
                data: [0],
                label: "nr1",
            }]
        },
        options: {
            responsive: false
        }
    });
}

Я что-то упустил? Большое спасибо.

1 Ответ

1 голос
/ 05 апреля 2020

Я нашел вашу проблему ...!

В начальный момент времени canvas установлен на display: block, вам нужно перейти на display: inline-block; после ; точка с запятой на холсте тег под style

Вы можете добавить align="center" или class="text-center" на canvas тег, как вы будете sh

Например: 

<canvas id="myCanvas" align="center" width="100" height="100" style="border:1px solid #000000; display: inline-block;">

Это решение вы можете проверить здесь 

$(document).ready(function() {
  $('#my_graph').append('<canvas id="myCanvas" align="center" width="100" height="100" style="border:1px solid #000000; display: inline-block;">');
});

$('#test_button').click(function(event) {
  drawGraph();
})


function drawGraph() {
  var ctx = document.getElementById('myCanvas');
    
  myLineGraph = new Chart(ctx, {
    type: 'line',
    data: {
      labels: [0],
      datasets: [{
        data: [0],
        label: "nr1",
      }]
    },
    options: {
      responsive: false
    }
  });
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Test</title>
    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
    <div class="container-fluid">
        <div class="col-sm-12">
            <div id="my_graph" class="text-center" >Graph: <br></div>
            <button id="test_button" type="button" class="btn btn-primary">test_button</button>
        </div>
    </div>

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- Bootstrap validator -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
    <!-- chart.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
    <!-- Import custom JavaScript -->
    <script src="./js.js"></script>
</body>

</html>
...