Убрать пробел между Google Charts в таблице - PullRequest
Новая
       10

Убрать пробел между Google Charts в таблице

0 голосов
/ 12 октября 2018

У меня есть несколько круговых диаграмм, которые находятся в таблице.Как я могу удалить пробел между ними?

Я много пробовал, если разные варианты (уменьшение элемента 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>

1 Ответ

0 голосов
/ 12 октября 2018

сначала, рекомендуем назначить размер диаграммы в параметрах диаграммы,
, а не в атрибуте 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 options 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>
...