我正在使用Chart.js库来创建一系列图表。我注意到在指定选项" responsive:true"时,虽然画布确实与页面宽度相反,但它不会将自身限制在页面高度,即使在全屏幕时也是如此。这是一个小小的演示: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;部分的大小,大约是它的两倍宽,并重新运行小提琴。)
如何让图表不仅限制窗口宽度,还限制高度?谢谢!
答案 0 :(得分:0)
答案 1 :(得分:0)
关键似乎在于这三个变化:
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 %>" });