谷歌圖表只顯示了一半

Question

我在 javascript 的 html 頁面上有一個循環，它將新數據推送到谷歌圖表的數據表中。 這是循環：

var dividend = 0;
var datalist = [["Round", "correct"]];
for (var i = 0; i < list1.length; i++) {
  var dividend = dividend+1;
  if(list1==word) {
    datalist.push([dividend, 1])
  }
  else {
    datalist.push([dividend, 0])
  }
  drawChart(datalist)
}

我改變了drawChart function 像這樣：

function drawChart(datalist) {
    var data = google.visualization.arrayToDataTable(datalist);

    var options = {
        chart: {
        title: 'Rounds',
        legend: {position: 'none'}
        },
        chartArea: {
            backgroundColor: '#636060',
            top:0, 
            left:0,
            height:'100%',
            width:'100%'
            
        }
        
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    chart.draw(data, options);
}

這是圖表的顯示方式：

<section id="curve_chart" class="übersone" style="width: 200px; height: 100px;"></section>

但是我遇到的問題是圖表的一部分被顯示並且 rest 被切斷。

這是它的樣子：

這就是它的樣子：

有誰知道問題是什么？

更新：我發現問題與循環無關。 我再次更改了 function 並將修復數據列表放入 arrayToDataTable function 中。

Answer 1

我解決了這個問題。 我在 css 代碼中犯了一個錯誤。 class 的寬度設置為 100 像素，這就是它被切斷的原因。 例子：

CSS 代碼：

.exampleClassOne{
    width: 100px;
}
.exampleClassTwo{
    width: fit-content;
}

HTML 代碼：

<section class="exampleClassTwo">
       <section id="curve_chart" class="exampleClassOne" style="width: 200px; height: 100px;">
</section>
   

在我發現循環不是問題后，我嘗試在jsfiddle中模擬我的問題。 像這樣，我在我的 css 代碼中發現了錯誤。