chartjs——不考虑反应图中的高度

Question

我正在使用图表 （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
    });
}

断续器

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

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

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

Answer 1

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

试试这个css。

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

和

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

这段代码适用于我的。