Диаграмма холста JS не загружает всю ширину внутри модального - PullRequest
Новая
       3

Диаграмма холста JS не загружает всю ширину внутри модального

0 голосов
/ 11 июня 2018

Я пытаюсь создать модал, используя javascript, но когда я добавляю диаграмму canvasjs внутри этой модальной ширины тела диаграммы холста, это не 100%.

Вы можете видеть то, что я вижу на этом изображении:

enter image description here

Я использую этот код внутри JavaScript: 

     // Get the modal
    var modal = document.getElementById('myModal');

    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks the button, open the modal 
    btn.onclick = function() {
        modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }

Я использую этот код для инициализации диаграммы: 

  let chart = new CanvasJS.Chart("chartContainer1", {
  animationEnabled: true,
  exportEnabled: true,
  title: {
    text: "Basic Column Chart in Angular"
  },
  data: [{
    type: "column",
    dataPoints: [
      { y: 71, label: "Apple" },
      { y: 55, label: "Mango" },
      { y: 50, label: "Orange" },
      { y: 65, label: "Banana" },
      { y: 95, label: "Pineapple" },
      { y: 68, label: "Pears" },
      { y: 28, label: "Grapes" },
      { y: 34, label: "Lychee" },
      { y: 14, label: "Jackfruit" }
    ]
  }]
});
chart.render();

Я пытаюсь сделать это в JavaScript, я не знаю, что мне нужно делать.Я хотел бы понять, почему это происходит.

Ответы [ 2 ]

0 голосов
/ 12 июня 2018

CanvasJS Chart автоматически устанавливает ширину и высоту диаграммы в соответствии с размерами контейнера.Если размер контейнера не указан, он принимает ширину и высоту по умолчанию (500px X 400px).

В начальной загрузке модальное значение изначально не отображается, поэтому диаграмма принимает ширину и высоту по умолчанию.Чтобы решить эту проблему, вы должны отобразить диаграмму при возникновении события visible.bs.modal. 

$('#chartModal').on('shown.bs.modal', function () {
    chart.render();
});

Рабочий код приведен ниже: 

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
  title: {
    text: "Basic Column Chart"
  },
  data: [
    {
      type: "column",
      dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55 },
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14 }
      ]
    }         
  ]
});

$('#chartModal').on('shown.bs.modal', function () {
  chart.render();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div class="container">
  <h4>CanvasJS Column Chart within Bootstrap Modal</h4>
  <!-- Trigger the modal with a button -->
  <button type="button" id="modalBtn"class="btn btn-info btn-lg" data-toggle="modal" data-target="#chartModal">Open Modal</button>
  <!-- Modal -->
  <div class="modal fade" id="chartModal" role="dialog">
    <div class="modal-dialog">   
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">CanvasJS Chart within Bootstrap Modal</h4>
        </div>
        <div class="modal-body">
           <div id="chartContainer" style="height: 360px; width: 100%;"></div>
        </div>
      </div>
    </div>
  </div>
</div>
0 голосов
/ 11 июня 2018

Ответ на ваш вопрос очень прост: вы загружаете свои диаграммы до того, как ваш модал становится видимым, вам нужно визуализировать диаграмму, когда ваш модал загружен.

Для этого вам нужно поместить визуализацию диаграммы внутри вашего.Событие клика, подобное этому: 

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
    let chart = new CanvasJS.Chart("chartContainer1", {
    animationEnabled: true,
    exportEnabled: true,
    title: {
        text: "Basic Column Chart in Angular"
    },
    data: [{
        type: "column",
        dataPoints: [
        { y: 71, label: "Apple" },
        { y: 55, label: "Mango" },
        { y: 50, label: "Orange" },
        { y: 65, label: "Banana" },
        { y: 95, label: "Pineapple" },
        { y: 68, label: "Pears" },
        { y: 28, label: "Grapes" },
        { y: 34, label: "Lychee" },
        { y: 14, label: "Jackfruit" }
        ]
    }]
    });
    chart.render();
}

Это решит вашу проблему, если вы хотите знать, почему это происходит, вы можете поместить этот график раньше: 

modal.style.display = "block";

Вы увидите, что вашграфик не работает должным образом.Я надеюсь, что это решит вашу проблему.

...