刪除表格中Google圖表之間的空間

Question

我在一個表中有多個餅圖。 如何刪除它們之間的空間？

我嘗試了很多不同的選項（使div元素更小，這是：從Google Charts中刪除填充或邊距，或者是：刪除表中兩個td元素之間的空間），但是沒有任何效果。

這是我的代碼：JS

function drawPieCharts(countChoices, name) {
        var rows = [];
        for (var property in countChoices) {
            if (countChoices.hasOwnProperty(property)) {
                rows.push([property, countChoices[property]]);
            }
        }


        var datatable = new google.visualization.DataTable();
        datatable.addColumn('string', 'Type');
        datatable.addColumn('number', 'Quantity');
        datatable.addRows(rows);
        var options = {
            title: String(name),
            is3D: 'true',
        };
        var chart = new google.visualization.PieChart(document.getElementById(String(name)));
        chart.draw(datatable, options);
    }

和html代碼

</head>
  <body>
    <!--Table and divs that hold the charts-->
    <table width="50%">
      <tr>
        <td><div id="1" style="width:700px;height:500px;"></div></td>
        <td><div id="2" style="width:700px;height:500px;"></div></td>
      </tr>
      <tr>
        <td><div id="3" style="width:700px;height:500px;"></div></td>
        <td><div id="4" style="width:700px;height:500px;"></div></td>
      </tr>
      <tr>
        <td><div id="5" style="width:700px;height:500px;"></div></td>
        <td><div id="6" style="width:700px;height:500px;"></div></td>
      </tr>
      <tr>
        <td><div id="7" style="width:1000px;height:500px;"></div></td>
      </tr>
    </table>
  </body>
</html>

Answer 1

首先，建議在圖表選項中分配圖表的大小，
而不是容器的style屬性中
由於我們正在與圈子打交道，
還建議對高度和寬度使用相同的尺寸（500 x 500）

接下來，使用圖表選項chartArea將圖表拉伸到容器的寬度。
為此，您需要將legend移到頂部或底部。

  chartArea: {
    height: '100%',
    width: '100%',
    top: 36,
    right: 12,
    bottom: 12,
    left: 12
  },
  legend: {
    position: 'top',
    alignment: 'center'
  },

使用chartArea選項top, right, bottom, left在邊緣留出空間，
用於諸如title ， legend和懸停時的“切片突出顯示”

請參閱以下工作片段...

 google.charts.load('current', { packages: ['corechart'] }).then(function() { var datatable = new google.visualization.DataTable(); datatable.addColumn('string', 'Type'); datatable.addColumn('number', 'Quantity'); datatable.addRows([ ['A', 10], ['B', 10], ['C', 10], ['D', 10], ]); for (var i = 1; i <= 7; i++) { drawChart(i); } function drawChart(index) { var options = { chartArea: { height: '100%', width: '100%', top: 36, right: 12, bottom: 12, left: 12 }, title: 'Chart ' + index, is3D: 'true', legend: { position: 'top', alignment: 'center' }, height: 500, width: 500 }; var chart = new google.visualization.PieChart(document.getElementById(index.toString())); chart.draw(datatable, options); } });

 <script src="https://www.gstatic.com/charts/loader.js"></script> <table> <tr> <td><div id="1"></div></td> <td><div id="2"></div></td> </tr> <tr> <td><div id="3"></div></td> <td><div id="4"></div></td> </tr> <tr> <td><div id="5"></div></td> <td><div id="6"></div></td> </tr> <tr> <td colspan="2"><div id="7"></div></td> </tr> </table>

刪除表格中Google圖表之間的空間

問題描述

1 個解決方案

解決方案1
0 已采納 2018-10-12 11:58:59

刪除表格中Google圖表之間的空間

問題描述

1 個解決方案

解決方案1 0 已采納 2018-10-12 11:58:59

解決方案1
0 已采納 2018-10-12 11:58:59