Question

我使用以下代码显示图表。图表的大小现在 500x500 。我只想显示图表的一半部分。喜欢 500x250 。但是当我更改div中的值时，而不是显示一半调整整个图表的大小。

我需要的是隐藏显示'黄色'的区域，（我不想让它透明）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Website Code Analyzer</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
    <script src="js/boostrap.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Pac Man', 'Percentage'],
          ['Analyzer Score', 75],
          ['', 25],
          ['', 100]
        ]);

        var options = {
          pieHole: 0.5,
          tooltip: {text: 'value'},
          title: 'My Daily Activities',
          legend: 'none',
          width: 500,
          pieSliceText: 'none',
          pieStartAngle: 270,
          slices: {
            0: { color: '#3366CC' },
            1: { color: '#EAE8E8'},
            2: { color: 'yellow'}
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('pacman'));
        chart.draw(data, options);
      }
    </script>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <div id="pacman" style="width: 500px; height: 500px;"></div>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

谢谢你们，我自己得到了答案

<div style="max-height:250px;overflow:hidden">
    <div id="pacman" style="width: 500px; height: 500px;"></div>
</div>

显示谷歌图表的一半部分

1 个答案: