Question

我在我的html页面使用bootstrap。我想连续放置三个dygraphs。我怎样才能实现这一目标？如果你能看到图表变得笨拙，我真的想避免它

这是截图

这是我写的代码

＆＃13;

<div class="container-fluid">
       <div class="row">
       <div class="col-lg-4">
      #graphdiv
      script(type='text/javascript').
          function darkenColor(colorStr) {
          // Defined in dygraph-utils.js
          var color = Dygraph.toRGB_(colorStr);
          color.r = Math.floor((255 + color.r) / 2);
          color.g = Math.floor((255 + color.g) / 2);
          color.b = Math.floor((255 + color.b) / 2);
          return 'rgb(' + color.r + ',' + color.g + ',' + color.b + ')';
          }
          function multiColumnBarPlotter(e) {
          // We need to handle all the series simultaneously.
          if (e.seriesIndex !== 0) return;
          var g = e.dygraph;
          var ctx = e.drawingContext;
          var sets = e.allSeriesPoints;
          var y_bottom = e.dygraph.toDomYCoord(0);
          // Find the minimum separation between x-values.
          // This determines the bar width.
          var min_sep = Infinity;
          for (var j = 0; j < sets.length; j++) {
          var points = sets[j];
          for (var i = 1; i < points.length; i++) {
          var sep = points[i].canvasx - points[i - 1].canvasx;
          if (sep < min_sep) min_sep = sep;
          }
          }
          var bar_width = Math.floor(2.0 / 3 * min_sep);
          var fillColors = [];
          var strokeColors = g.getColors();
          for (var i = 0; i < strokeColors.length; i++) {
          fillColors.push(darkenColor(strokeColors[i]));
          }
          for (var j = 0; j < sets.length; j++) {
          ctx.fillStyle = fillColors[j];
          ctx.strokeStyle = strokeColors[j];
          for (var i = 0; i < sets[j].length; i++) {
          var p = sets[j][i];
          var center_x = p.canvasx;
          var x_left = center_x - (bar_width / 2) * (1 - j/(sets.length-1));
          ctx.fillRect(x_left, p.canvasy,
          bar_width/sets.length, y_bottom - p.canvasy);
          ctx.strokeRect(x_left, p.canvasy,
          bar_width/sets.length, y_bottom - p.canvasy);
          }
          }
          }
          g = new Dygraph(document.getElementById("graphdiv"),"Date,ttfb(fv),ttfb(rv),loadtime(fv),loadtime(rv)\n"+"#{final_str_app}",{strokeWidth: 3,axes:{y:{axisLabelFormatter: function(y){return (y/1000 + 'sec')}}},axisLineColor: 'red',axisLineWidth: 2.0,valueFormatter: function(num){if(num>100000000){return moment(num).format('YYYY-MM-DD');}return (num/1000);},includeZero: true,plotter: multiColumnBarPlotter});
      </div>

＆＃13;

Answer 1

我不太确定你想要实现的目标，但从你的描述中我认为你应该考虑使用Bootstrap的grid system。这应该将html元素保持在正确的位置，具体取决于屏幕宽度（也包括移动屏幕）。调整col-xs-*以获得适当的间距。

<div class="row">
  <div class="col-xs-4">    
    Chart 1 
  </div>
  <div class="col-xs-4">               
    Chart 2
  </div>
  <div class="col-xs-4">
    Chart 3
  </div>
</div>

如何有效地并排排列网页中的三个dygraphs

1 个答案: