"响应" Chart.js图表​​比包含窗口高

时间:2015-11-10 19:39:28

标签: javascript css canvas html5-canvas chart.js

我正在使用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;部分的大小,大约是它的两倍宽,并重新运行小提琴。)

如何让图表不仅限制窗口宽度,还限制高度?谢谢!

2 个答案:

答案 0 :(得分:0)

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

omp_get_wtime()

答案 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 %>" });