1. 首頁
  2. 問答
  3. 無法更改chart.js大小

無法更改chart.js大小

2017-04-25 128 views
0 
<html> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="/css/graph2.css"> 
    <title>Graph</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script> 

</head> 
<body> 
    <canvas id="updating-chart" width="200" height="200"></canvas> 
</body> 
</html>

這就是我正在使用的html，我使用的是Chart.js 2.1.4，但無論我做什麼，都無法縮小大小。無法更改chart.js大小

的Javascript：

<script type="text/javascript"> 
var canvas = document.getElementById('updating-chart'), 
    ctx = canvas.getContext('2d'), 
    startingData = { 
     labels: ["A", "B", "C", "D"], 
     datasets: [ 
      { 
      label: "Product A", 
      fillColor: "rgba(220,220,220,0.5)", 
      strokeColor: "rgba(220,220,220,0.8)", 
       pointColor: "rgba(220,220,220,1)", 
       pointStrokeColor: "#fff", 
       data: [65, 59, 80, 81] 
      } 
     ] 
    }; 

var myLiveChart = new Chart(ctx,{ 
    type: 'bar', 
    data: startingData, 
    responsive: true, 
    maintainAspectRatio: true 
}); 
</script>

我怎樣才能解決這個問題？我總是得到一個非常大的圖，無論我在canvasHTML字段中改變了什麼，都能完全覆蓋整個屏幕。

幫助？

來源

2017-04-25 sssszzzzzzssszzz

+0

您可以編輯您的文章，包括_/CSS/graph2.css_的內容，至少任何涉及畫布或與它有關？ –

回答

0

如果將畫布放在容器中並使用CSS設置寬度，它將調整圖形的大小。

https://jsfiddle.net/ug5eczp2/1/

HTML：

<section> 
    <canvas id="updating-chart" width="200" height="200"></canvas> 
</section>

CSS：

section { 
    width: 50%; 
}

來源

2017-04-25 03:34:28 Pango

0

畫布將適合的部分容器。下面的代碼。 只需將該部分的寬度更改爲所需的值即可。

<section> 
    <canvas id="updating-chart" ></canvas> 
</section> 

section { 
width: 100%; 
} 
section > canvas { 
top: 0; 
bottom: 0; 
right: 0; 
left: 0; 
}

來源

2017-04-25 03:41:07 blecaf

0

你可以嘗試刪除寬度值，指定的高度值僅

<canvas id="updating-chart" height="200"></canvas>

來源

2017-04-25 03:44:47

相關問題

 相關問題