Question

我正在尝试使用javascript创建一个模态但是当我在画布中添加canvasjs图表时，画布图表的体宽不是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

回答你的问题非常简单你在模态可见之前加载你的图表你需要在模态加载时渲染图表。

为了做到这一点，你需要在你的点击事件中放置图表渲染，如下所示：

// 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";

您将看到图表无法正常工作。我希望这能解决你的问题。

Answer 2

CanvasJS Chart根据容器的尺寸自动设置图表的宽度和高度。如果未指定容器的尺寸，则会占用默认宽度＆amp;高度（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>

画布js图表没有在模态内加载全宽

2 个答案: