Question

我有两个使用DimpleJS创建的图表。我想将它们并排放在我的网页上。使用bootstrap网格，我遇到了一些问题。这是我正在使用的网格结构的基本轮廓：

<html>
<div class="row">
<div class="col-md-6">
<div id="chart1">
  code of DimpleJS chart1 which binds it to div "chart1"
  </div>
  </div>
<div class="col-md-6">
<div id="chart2">
  code of DimpleJS chart2 which binds it to div "chart2"
</div>
</div>
</div>
</html>

但是当我这样做时，我的两个图表在网页的右侧相互重叠。不知道我犯了什么错误。

Answer 1

这可能不是最好的方法，但对于我自己，我这样做是为了水平显示两个图表。

   <div>
       <div id="chart1" style = "float:left;width:45%;"</div>
       <div id="chart2" style = "float:right;width:45%;"</div>
  </div>

确保将其放在标签

之间

Answer 2

您没有向我们展示创建Dimple图的代码，但是您是否尝试在svg上设置固定的高度和宽度？如果你有一个固定大小的svg并且它超过了bootstrap列的像素宽度，那么图表可能会重叠或被切断。为避免这种情况，请在Dimple代码中将svg的高度和宽度设置为＆＃34; 100％＆＃34;。此外，Dimple不会自己调整这些图表的大小，所以你应该添加一个window.onresize处理程序来完成它。

最后，您的图表是否保持纵横比？环形和饼图将保持纵横比，而条形图则不会。（不确定折线图或其他。）如果是这样，那么你可能还想在容器div上设置一个固定的高度，以防止当容器div不是正方形时图的尺寸变得很小：它可以防止当div非常高大，当div非常宽时，它可以防止可笑的巨大情节。

研究以下剥离的示例：

<html>
<head>
  <script src='http://d3js.org/d3.v4.min.js'></script>
  <script src="/lib/d3.v4.3.0.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.3.0.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <h3>Column 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
          <div id="test1" style="height: 400px;"></div>
        </div>
      <div class="col-sm-6">
        <h3>Column 2</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco    laboris...</p>
          <div id="test2" style="height: 400px;"></div>
      </div>
    </div>
  </div>
  <script type="text/javascript">  
    var data = [{x:"Gopher", o:100},
                {x:"Julie", o:100},
                {x:"Steubing", o:100},
                {x:"Isaac", o:100},
                {x:"Doc", o:100}];

    var makeChart = function(ele, data) {
        svg = dimple.newSvg(ele, "100%", "100%");
        chart = new dimple.chart(svg, data);
        chart.setMargins(40,40,40,40);
        chart.addMeasureAxis("p", "o");
        var ring = chart.addSeries("x", dimple.plot.pie);
        ring.innerRadius = "50%";
        chart.addLegend(40,20,50,120,"right");
        chart.draw();    
        return chart;
    };

    var chart1 = makeChart("#test1", data);
    var chart2 = makeChart("#test2", data);

    window.onresize = function() {
        chart1.draw(0,true);
        chart2.draw(0,true);
    }

    </script>
</body>
</html>

将DimpleJS图表添加到div

2 个答案: