只显示了 Google 个图表的一半

Question

我在 javascript 的 html 页面上有一个循环，它将新数据推送到 google 图表的数据表中。这是循环：

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 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>

但是我遇到的问题是只显示了图表的一部分，其余部分被截断了。

这是它的样子：

它应该是这样的：

有人知道问题出在哪里吗？

更新：我发现问题与循环无关。我再次更改了函数，并在 arrayToDataTable 函数中放置了一个修复数据列表。

Answer 1

我解决了这个问题。我在 css 代码中犯了一个错误。 class 的宽度设置为 100px，这就是它被截断的原因。示例：

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 代码中发现了错误。

只显示了 Google 个图表的一半

Only half of Google Chart getting displayed

javascript

charts

loops

for-loop

google-visualization