gridster c3 차트 자동 크기 조정 문제

Question

나는 gridster에서 c3 charts 사이징 문제와 관련된 문제에 직면하고 있습니다. 어느 누구도 저에게 도움을 줄 수 있습니까? 차트를 올바르게 자동 크기 조정을 할 수있는 Gridster 상자에 따라 만들 수 있습니까? 옵션에서 Plunker

내가 준 크기를 찾아주세요 :

size: { 
     height: 100, 
     width: 100 
    } 

내가 차트 상자의 외출이 크기 속성을 제거합니다. 그러나 그들은 작은 상자 안에 너무 작습니다. 차트를 자동으로 높이 및 너비를 차지하는 gridster 상자로 만들려면 어떻게합니까?

Answer 1

저는 오래 전에 비슷한 문제가있었습니다. 내가 한 일은 scale()을 사용하지만 firefox에서는 작동하지 않습니다.

로드 할 때 기본적으로 너비를 찾고 사용자가 화면 크기 (또는 컨테이너 크기를 조정하는 등의 다른 이벤트)를 변경하면 새 배율을 설정하십시오.

은 plunker의 하단에이를 추가 확장 할 수

<script> 

    let width = window.innerWidth; 

    window.addEventListener('resize', (event) => { 
     let newWidth = window.innerWidth; 
     let ratio = newWidth/width; 
     let ctnr = document.getElementById('widget1'); 

     ctnr.style.transform = "scale(" + ratio + ")"; 

    }); 
</script> 

위젯 1. 물론 당신이 당신을 위해 일하는 것을 찾을 수와 비트를 연주 할 수도 있습니다.

그러나 위젯은 그대로 유지됩니다. 따라서 왼쪽에 정렬하려면 CSS에서 사용할 수 있습니다.

transform-origin: 0; 

이 정보가 도움이되기를 바랍니다. 사용중인

Answer 2

옵션은 :

size: { 
    height: 100, 
    width: 100 
} 

는 100px 대신 100%의에 svg 요소의 높이와 너비를 설정하는 나는 성공적으로 width 100%로 설정됩니다

size: { 
    height: '100%', 
    width: '100%' 
} 

시도 하지만 어쨌든 height은 320px

로 설정됩니다.

그래서 당신은 당신의 CSS는이를 추가하는 경우 :

.c3 svg { 
    width: 100%; 
    height: 100%; 
} 

크기 조정 문제를 해결할 것이다.

편집

크기 조정에 컨트롤러 추가 초기 크기와 약간의 주석을 설정하는 그냥 작은 변화 - 당신이에 따라 차트의 일부 크기 조정을 추가해야합니다 경우, 이벤트 핸들러를 중지 새로운 크기. 사용이가 C3 플러그인과 동일 플러그인 nvd3 See it here

resizable: { 
    enabled: true, 
    handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'], 

    // optional callback fired when resize is started 
    start: function(event, $element, widget) {}, 

    // optional callback fired when item is resized, 
    resize: function(event, $element, widget) {}, 

    // optional callback fired when item is finished resizing 
    stop: function(event, $element, widget) { 
     // here should update the size according to the widget size 
     // widget.sizeX (* 160px) and widget.sizeY (* 160px) 
     // and further adjustments 
    } 
    }, 

Answer 3

는이 원활 gridster와 함께 작동, 아래의 링크를

https://krispo.github.io/angular-nvd3/#/dashboard