图表 js - 在响应式图表中不采用高度答案

【问题标题】：chartjs - Not taking the height in reponsive chart图表 js - 在响应式图表中不采用高度
【发布时间】：2014-12-25 18:04:43
【问题描述】：

我正在使用 chartjs (http://chartjs.org)。我试图给我的图表一个特定的高度，但它没有接受它。图表设置为响应式，因此我使用 100% 的宽度。请检查我下面的代码和笔。

Javascript /* * 折线图 */

var randomScalingFactor = function(){ return Math.round(Math.random()*50)};
var lineChartData = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            label: "My First dataset",
            fillColor : "rgba(220,220,220,0.2)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(220,220,220,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        },
        {
            label: "My Second dataset",
            fillColor : "rgba(151,187,205,0.2)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(151,187,205,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        }
    ]

}

window.onload = function(){ 
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true
    });
}

HTML

<div style="width: 100%; height: 300px">
    <canvas id="canvas"></canvas>
</div>

Codepen - http://codepen.io/rushenn/pen/PwGjOr

如何在响应式图表上设置特定高度？

【问题讨论】：

标签： javascript html charts chart.js

【解决方案1】：

您是否尝试过将高度直接赋予画布而不是包装器 div？

试试这个 CSS。

    canvas{
        width: 100% !important;
        max-width: 1000px;
        height: auto !important;
    }

和

<canvas id="canvas" width="1000" height="300"></canvas>

此代码适用于我的。

【讨论】：