的Javascript圖表填滿整個瀏覽器窗口

我使用chart.js之創造我的第一個圖表。顯示的Javascript圖表填滿整個瀏覽器窗口

圖表就像我希望它只是一個事實，即它總是充滿整個瀏覽器屏幕。

我已經嘗試設置圖表尺寸爲100，但它似乎並沒有工作。

我已經創建了一個展示我的問題上的jsfiddle：

而且，這裏的代碼，如果你想在這裏查看：

的Javascript：

$(function() { 
    displayLineChart(); 

    function displayLineChart() { 
     var data = { 
      labels: ['first', 2, 3, 4, 5, 6, 7, 8, 9, 10], 
      datasets: [{ 
       label: "Prime and Fibonacci", 
       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: [2, 3, 5, 7, 11, 13, 17, 19, 23, 29] 
      }, { 
       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: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34] 
      }] 
     }; 

     var chart = document.getElementById("lineChart"); 
     chart.width = 100; 
     chart.height = 100; 

     var ctx = document.getElementById("lineChart").getContext("2d"); 
     ctx.canvas.width = 100; 
     ctx.canvas.height = 100; 
     var options = {}; 
     var lineChart = new Chart(ctx, { 
      type: 'line', 
      data: data, 
     }); 
    } 
});

HTML：

<canvas id="lineChart"> 
</canvas>

來源

2016-08-05 J. Doe

包裝在一個<div>，然後大小：

CSS：

#wrapper { 
    width: 400px; 
    height: 500px; 
}

HTML：

<div id="wrapper"> 
    <canvas id="lineChart"> 
    </canvas> 
</div>

jsFiddle。

來源

2016-08-05 12:06:16

啊我明白了。它現在完美。非常感謝！ –

一切都好！ :)只是爲了進一步的解釋，圖表的大小是相對於其父元素，這就是爲什麼這個工程。 –

您需要填寫的options它作爲參數傳遞給圖表。

$(function() { 
    displayLineChart(); 

    function displayLineChart() { 
     var data = { 
      labels: ['first', 2, 3, 4, 5, 6, 7, 8, 9, 10], 
      datasets: [{ 
       label: "Prime and Fibonacci", 
       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: [2, 3, 5, 7, 11, 13, 17, 19, 23, 29] 
      }, { 
       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: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34] 
      }] 
     }; 

     var chart = document.getElementById("lineChart"); 
     chart.width = 500; 
     chart.height = 500; 

     var ctx = document.getElementById("lineChart").getContext("2d"); 
     ctx.canvas.width = 500; 
     ctx.canvas.height = 500; 
     var options = { 
      responsive: false, 
      maintainAspectRatio: true 
     }; 
     var lineChart = new Chart(ctx, { 
      type: 'line', 
      data: data, 
      options: options 
     }); 
    } 
});

來源

2016-08-05 12:12:43

的Javascript圖表填滿整個瀏覽器窗口

回答

相關問題