Bootstrap + C3;Сетка не работает под нагрузкой - PullRequest
Новая
       8

Bootstrap + C3;Сетка не работает под нагрузкой

0 голосов
/ 10 сентября 2018
  • C3 версия : 0,6,7
  • Версия D3 : 5
  • Браузер : Firefox ESR
  • ОС : Debian 9

Я хочу создать веб-страницу с четырьмя рядами по три кольцевых диаграммы в каждой. Я использую Bootstrap с C3.js.

Мой код выглядит следующим образом. 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

  <title>U.S. presidential vote, 1972-2016, by race</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link href="css/c3.min.css" rel="stylesheet">
  <style type="text/css">
    .c3-chart-arcs-title {
      font-size: 1.5rem;
    }
  </style>


  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="js/c3.min.js"></script>

  <script type="text/javascript">
    var dataDir = "vote-by-race";
    d3.csv(dataDir + "/white.csv").then(function(data) {
      var row;
      data.forEach(function(d, i) {
        if (i % 3 === 0) {
          row = document.createElement("div");
          row.className = "row";
        }

        var col = document.createElement("div");
        col.className = "col-sm";

        var chartDiv = document.createElement("div");
        chartDiv.id = "chart" + i;

        col.appendChild(chartDiv);
        row.appendChild(col);
        document.getElementById("charts").appendChild(row);

        var chartDataObj = Object.assign({}, d);
        delete chartDataObj["Year"];
        var chart = c3.generate({
          data: {
            json: chartDataObj,
            type: "donut",
            colors: {
              Democrat: "#2166ac",
              Republican: "#b2182b",
              Other: "#bbb"
            }
          },
          tooltip: {
            show: false
          },
          legend: {
            show: false
          },
          donut: {
            title: d["Year"],
            label: {
              format: function(value, ratio, id) {
                return d3.format('.0%')(value / 100);
              }
            }
          },
          bindto: '#' + chartDiv.id
        });
      });
    });
  </script>
</head>

<body>
  <div id="charts" class="container"></div>
</body>

</html>

Мой CSV ... 

Year,Democrat,Republican,Other
1972,32,66,2
1976,47,52,1
1980,35,56,9
1984,35,64,1
1988,40,59,1
1992,39,40,21
1996,43,46,11
2000,42,54,4
2004,41,58,1
2008,43,55,2
2012,39,59,2
2016,37,58,5

Когда я загружаю страницу в браузере, я вижу 12 кольцевых диаграмм в одном вертикальном столбце. Но когда я изменяю размер окна браузера до самого тонкого, а затем снова расширяю его, я вижу четыре строки по три кольцевых диаграммы в каждом.

Как сделать так, чтобы браузер отображал четыре строки по три графика в каждой при первой загрузке?

...