Bootstrap 모달 내부에서 동적으로 차트를 생성하려고 시도하여 offsetWidth 오류가 발생합니다.

나는 이것을 Plunkr 에서 작동시킬 수 있었다 .

나는 모두 변경 무엇의 기본 contextualizeForType2()과 contextualizeForType3()같은 다음과 같습니다 :

1. 막대 차트 구성 요소를 인스턴스화하는 올바른 방법은 추가 한 캔버스 요소에 2D 컨텍스트를 사용하는 것입니다. 코드에서는 줄 new Chart(ctx.getContext('2d')).Bar(finalData);뒤에 var ctx = ...있습니다. 그러나 모달이 아직 표시되지 않았기 때문에 높이와 너비가 0입니다.
2. 차트가 올바른 높이와 너비를 사용하도록 shown.bs.modal하려면 모달 애니메이션이 완료되면 트리거 되는 이벤트에 바인딩해야합니다 . 해당 이벤트 처리기 내부에서 차트를 생성합니다. 까다로운 부분은 동일한 모달을 재사용하는 두 가지 다른 질문이 있기 때문입니다. 그래서 .typeX모달이 숨겨 질 때 이벤트 등록을 취소 하는 추가 네임 스페이스를 추가했습니다 .

두 번째 요점이 혼란 스럽다는 것을 알고 있지만 코드가이를 해결하기를 바랍니다.

var ctx = document.getElementsByTagName("canvas")[0];
$('#myModal').on({
  'shown.bs.modal.type2': function() {
    new Chart(ctx.getContext("2d")).Bar(finalData);
  },
  'hidden.bs.modal.type2': function() {
    this.off('.type2');
  }
});

즉, 일단 모달이 숨겨지면 다른 유형에 대해 동일한 모달이 표시 될 때이 두 함수가 다시 실행되지 않습니다. 또한 버튼을 클릭 할 때마다 새 핸들러를 추가하기 때문에 필요한 것보다 더 많은 차트를 만들지 않아도됩니다.

대체 방법

나는 더 많은 플레이를contextualizeForType2() 했고 contextualizeForType3(), 그리고 둘 다에서 호출 할 수있는 단일 함수로 코드를 리팩토링 하고 finalData. 이것은 모든 캔버스와 차트 초기화 코드를 한곳에 남겨두고 큰 기능을 다소 단순화하고 유지 관리를 더 쉽게 만드는 장점이 있습니다.

기능은 다음과 같습니다.

function showModalChart(data) {
  var canvasElement = document.createElement("CANVAS");
  canvasElement.setAttribute("width", "400");
  canvasElement.setAttribute("height", "400");

  document.getElementById("modalBody").appendChild(canvasElement);

  var ctx = document.getElementsByTagName("canvas")[0];
  $('#myModal').off('.modalchart').on('shown.bs.modal.modalchart', function () {
      new Chart(ctx.getContext('2d')).Bar(data);
  });
}