Chartjs 사용자 정의 동적 범례 넘침

Question

나는 chartjs 범례를 동적으로 작성합니다.

차트를 부모에게 맞게 세로로 동적으로 확장하려면 차트 옵션에 maintainAspectRatio: false 속성을 사용합니다.

또한 내 범례 및 차트를 상위 컨테이너에 넣기를 원합니다. 문제는 chartjs가 동적으로 생성 된 범례를 보지 못하며 height이 480px 인 차트를 제공한다는 것입니다. 이것은 범례가 내부에 들어 가지 않고 부모 컨테이너 외부로 밀려 났음을 의미합니다. 나는 동적으로 범례를 생성하지만, 또한 용기의 외부는 전설을 밀어하지 않도록이 계정에 높이의 취할 chartjs을 어떻게 알 수 있습니까

http://jsfiddle.net/vrwjfg9z/4292/

:

는 여기에 문제를 보여주는 jsfiddle입니다 ?

자바 스크립트 :

var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      backgroundColor: "rgba(255,99,132,0.2)", 
      borderColor: "rgba(255,99,132,1)", 
      borderWidth: 2, 
      hoverBackgroundColor: "rgba(255,99,132,0.4)", 
      hoverBorderColor: "rgba(255,99,132,1)", 
      data: [65, 59, 20, 81, 56, 55, 40], 
     } 
    ] 
}; 

var options = { 
    legend: { 
    display: false, 
    }, 
    maintainAspectRatio: false, 
    scales: { 
    yAxes:[{ 
      stacked:true, 
     gridLines: { 
      display:true, 
      color:"rgba(255,99,132,0.2)" 
     } 
    }], 
    xAxes:[{ 
      gridLines: { 
      display:false 
     } 
    }] 
    } 
} 

var canvas = document.getElementById("myChart"); 

var myChart = Chart.Bar(canvas, { 
    data: data, 
    options: options, 
}); 

// Note - tooltipTemplate is for the string that shows in the tooltip 

// legendTemplate is if you want to generate an HTML legend for the chart and use somewhere else on the page 

// e.g: 

document.getElementById('js-legend').innerHTML = "This dynamically generated line of text should be within chart-container but it is incorrect" 

HTML :

<div class='root'> 
    <div class='chart-container'> 
    <div class='chart'> 
     <canvas id="myChart" style="width: 100%; height: auto;"></canvas> 
    </div> 
    <div>This line of text should be within chart-container and it is correct</div> 
    <div id="js-legend"></div> 
    </div> 
</div> 

CSS는 :

.root { 
    height: 500px; 
} 
.chart-container { 
    display: flex; 
    flex-direction: column; 
    border: solid 2px red; 
    height: 100%; 
    position: relative; 
    width: 500px; 
} 

.chart { 
    flex: 1; 
} 

Answer 1

변경 .chart 컨테이너에 자동으로 높이와 100 %의 최소 높이를 추가합니다.

.chart-container { 
    display: flex; 
    flex-direction: column; 
    border: solid 2px red; 
    height: auto; 
    min-height: 100%; 
    position: relative; 
    width: 500px; 
} 

http://jsfiddle.net/o0Lok3y0/

당신은 전설이 추가 된 후 차트의 높이를 변경하는 자바 스크립트를 추가 할 수 있습니다

.

var legend = document.getElementById('js-legend'), 
    canvas = document.getElementById('myChart'); 

legend.innerHTML = "This dynamically generated line of text should be within chart-container but it is incorrect" 

var legendStyle = window.getComputedStyle(legend), 
    canvasStyle = window.getComputedStyle(canvas), 
    legendHeight = legendStyle.height.replace("px", ""), 
    canvasHeight = canvasStyle.height.replace("px", ""); 

canvas.style.height = (canvasHeight - legendHeight) + 'px'; 

http://jsfiddle.net/7m7hbrhn/