Подсказка диаграммы js не отображается в зависимости от размера холста - PullRequest
Новая
       9

Подсказка диаграммы js не отображается в зависимости от размера холста

1 голос
/ 25 марта 2020

У меня есть график js, и всплывающие подсказки не отображаются, когда я использую холст size width = "275" и height = "80". В этом примере я заметил, что всплывающие подсказки отображаются с указанным выше размером холста, но когда я переключаю F12 в go в режим отладки, всплывающие подсказки перестают отображаться. Если я использую холст size width = "80" height = "300", проблема исчезнет, ​​однако у меня появится большая открытая область между моим графиком и нижней частью страницы.

У кого-нибудь есть какие-либо предложения?

Мой код выполняется при загрузке страницы: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test Graph</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0" type="text/javascript"></script>
    <script src="graph.js" type="text/javascript"></script>
</head>
<body onload="buildChart()">
    <canvas id="myCanvas" height="80" width="275">
    <!-- canvas id="myCanvas" height="80" width="300" -->
</body>
</html>

function buildChart() {
   var canvas = document.getElementById("myCanvas");
   var ctx = canvas.getContext('2d');
   var bgColor = 'rgba(255, 0, 0, 1)';
   Chart.scaleService.updateScaleDefaults('linear', {
       ticks: {
           min: 0
       }
   });
       myLabels = ["Label1","Label2","Label3","Label4","Label5","Label6","Label7","Label8","Label9","Label10"];
       myData = ["1","2","3","4","5","6","7","8","9",""];
       myChart = new Chart(ctx, {
           type: 'line',
           data: {
                   labels: myLabels,
                 datasets: [{
                             backgroundColor: bgColor,
                             borderColor: 'rgba(0, 0, 0, 1)',
                             borderWidth: 1,
                             label: 'My Test Data',
                             pointBackgroundColor: 'rgba(0, 255, 0, 1)',
                             pointBorderColor: 'rgba(0, 0, 0, 1)',
                             data: myData,
                             yAxisID: 'yAxis'
                           }]
                 },
        options: {
           scales: {
                    yAxes: [{
                             id: 'yAxis',
                             type: 'linear',
                             position: 'left'
                            }]
                   }
                 }
        });
   myChart.update();
}

В этом примере я заметил, что всплывающие подсказки отображаются, но когда я перехожу с F12 на go в режиме отладки, всплывающие подсказки прекратить показ. Пытаясь решить эту проблему, я обнаружил, что проблема, похоже, связана с размером холста. Я получаю проблему, когда использую холст size height = "80" width = "275", если я использую canvas холст width = "80" height = "300", проблема исчезает, однако у меня появляется большая открытая область между моим графиком и нижней частью страницы.

...