Question

我使用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

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

Answer 1

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

试试这个css。

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

和

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

此代码适用于我的。

chart js - 在响应式图表中没有达到高度

1 个答案: