javascript - Canvas js图表未在模式内加载全宽

Question

我正在尝试使用 javascript 创建一个模态，但是当我在 Canvas 图表的模态主体宽度内添加 canvasjs 图表时， Canvas 图表的宽度不是 100%。

您可以看到我在这张图片中看到的内容:

我在 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 中执行此操作，但我不知道需要做什么。我想了解为什么会发生这种情况。

Answer 1

CanvasJS Chart 根据容器的尺寸自动设置图表的宽度和高度。当未指定容器的尺寸时，它将占用默认的宽度和高度(500px X 400px)。

在 bootstrap 中，模态框最初不会显示，因此图表采用默认的宽度和高度。要解决此问题，您应该在 shown.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>