web-dev-qa-db-ja.com

Chart.jsがコンテナのサイズを考慮していない

Chart.jsライブラリを使用して折れ線グラフを作成しようとしています。幅600px×高さ250pxのdivがあり、ライブラリを読んだところ、これらの親ディメンションを使用して折れ線グラフを作成することを意図しています。

以下は私のHTML要素を示しています。

<div style="width:600px;height:250px">
    <canvas id="myChart"></canvas>
</div>

これは私が使用しているコードです：

$(document).ready(function(){
     var data = {
                    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: [65, 59, 80, 81, 56, 55, 40]
                        },
                        {
                            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: [28, 48, 40, 19, 86, 27, 90]
                        }
                    ]
                };
                var ctx = $("#myChart").get(0).getContext("2d");
                new Chart(ctx).Line(data, {
                    responsive:true
                });
});

そして、これは私がjsfiddleで持っている問題を示しています： https://jsfiddle.net/Lr88htnp/ （レンダリングされたグラフの寸法は600x300であることに注意してください）

javascriptjqueryhtmlcsschart.js
13
lisburnite

オプションmaintainAspectRatioをfalseに設定する必要があります

....
new Chart(ctx).Line(data, {
    responsive:true,
    maintainAspectRatio: false
});

フィドル- https://jsfiddle.net/3cxeyLc8/

41
potatopeelings

次のCSSを#myChartに追加します。

 <canvas id="myChart" style="width:100%;height:100%;"></canvas>
9
Bangkokian