Chartjsカスタム動的凡例がオーバーフローする

Question

私はchartjs凡例を動的に作成します。

グラフを親に合わせて縦方向に動的に拡大するには、グラフオプションのmaintainAspectRatio: falseプロパティでこれを行います。

また、私の凡例とグラフを親コンテナに収めたいと思っています。問題は、chartjsが動的に生成された凡例を表示せず、heightの480pxというグラフを与えることです。これは、凡例が親コンテナの内側にフィットするのではなく親コンテナの外側にプッシュされることを意味します。ここで

は、問題を示すjsfiddleです：

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

どのように動的に凡例を生成するだけでなく、それはそれのコンテナの外に凡例をプッシュしないように、それは考慮に入れて高さだ取るchartjsを教えてください？

Javascriptを：

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：.chart-コンテナの自動車へ

.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

変更の高さと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/

伝説が追加された後、あなたは、チャートの高さを変更するためにJavaScriptを追加することができます。

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/