＆＃34;响应＆＃34; Chart.js图表​​比包含窗口高

Question

我正在使用Chart.js库来创建一系列图表。我注意到在指定选项＆＃34; responsive：true＆＃34;时，虽然画布确实与页面宽度相反，但它不会将自身限制在页面高度，即使在全屏幕时也是如此。这是一个小小的演示：http://jsfiddle.net/uxtb9wj9/

StackOverflow需要我使用带有代码的jsfiddle链接，所以这里是：

HTML

from flask import Flask
import csv
import StringIO
from flask import make_response
app = Flask(__name__)
from requests import request

@app.route('/')
def landing():
    return '<input type="submit" name="submit" value="Get Data">'


def data():
    if request.method == 'POST':
        if request.form['submit'] == 'Get Data':
            csvlist = [['item 1', 'item2'], ['box1', 'box2']]

            si = StringIO.StringIO()
            cw = csv.writer(si)
            cw.writerows(csvlist)
            output = make_response(si.getvalue())
            output.headers["Content-Disposition"] = "attachment; filename=export.csv"
            output.headers["Content-type"] = "text/csv"
            return output

if __name__ == '__main__':
    app.run()

JS

<div class="row chartArea">
<div class="col-md-12">
    <div class="chartArea">
        <canvas id="chart" style="height: auto !important;"></canvas>
    </div>
</div>
</div>

外部资源

jQuery 2.1.4，Bootstrap CSS 3.0，Chart.js 1.0.2

（在小提琴中，只需调整＆＃34;结果＆＃34;部分的大小，大约是它的两倍宽，并重新运行小提琴。）

如何让图表不仅限制窗口宽度，还限制高度？谢谢！

Answer 1

我认为在你的情况下使用视口高度是一个好主意。这在Javascript中非常简单：

omp_get_wtime()

Answer 2

关键似乎在于这三个变化：
1）不使用库提供的“responsive：true”选项 2）明确设置宽度和高度 3）将高度设置为90％而不是window.innerHeight的100％，否则它仍然高于包含窗口。

var ctx = document.getElementById("chart").getContext("2d");
ctx.canvas.width = window.innerWidth; 
ctx.canvas.height = window.innerHeight * 0.9; 
var myLine1 = new Chart(ctx).Line2Y(lineChartData1, { scaleBeginAtZero: true, scaleShowGridLines: false, scaleShowLabels: true, showTooltips: true, tooltipTemplate: "<%= datasetLabel %>: <%= value %>" });