Question

我正在尝试实现一个简单的仪表板，但我遇到了firefox和chrome之间的宽度问题（我在这方面没有经验）。一切都在firefox上完美运行，但在Chrome上完全拉伸。

这是我在html中选择的部分：

<body class="application">

  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="./">Dashboard with &hearts;</a>
      </div>
    </div>
  </div>

  <div class="container-fluid">

    <div class="row">

      <div class="col-sm-12">
        <div class="row">

          <!-- Test Chart -->
          <div class="col-sm-12">
            <div class="chart-wrapper">
              <div class="chart-title">
                Test Chart
              </div>
              <div class="chart-stage">
                <!--<div id="chart"></div>-->
                <div class="row">
                  <div id="chart"></div>
                </div>

                <div class="row">
                  <div id="volume-chart"></div>
                  <p class="muted pull-right" style="margin-right: 15px;">select a time range to zoom in</p>
                </div>
              </div>
            </div>
          </div>

        </div>

      </div>

    </div>

  </div>

javascript one：

queue()
    .defer(d3.json, "/data")
    .await(makeGraphs);


function makeGraphs(error, recordsJson) {

    // Clean data
    var records = recordsJson;

    var dateFormat = d3.time.format("%Y-%m-%d %H:%M");
    console.log(Object.prototype.toString.call(records[0].date));

    records.forEach(function(d) {
        d.date = new Date(d.date);
    });

    // Slice data to ease debugging
    records = records.slice(0, 2000);

    // Crossfilter instance
    ndx = crossfilter(records);

    // Define Dimensions
    var dateDim = ndx.dimension(function(d) { return d.date; });
    var prodPowDim = ndx.dimension(function(d) { return d.prodPow; });
    var consPowDim = ndx.dimension(function(d) { return d.consPow; });

    // Define Groups
    var consByDate = dateDim.group().reduceSum(function (d) { return d.cons; });
    var prodByDate = dateDim.group().reduceSum(function (d) { return d.prod; });
    // Group by total volume within date dimension
    var volumeByDateDim = dateDim.group().reduceSum(function (d) { return d.cons; });


    // Min and max dates to be used in the charts
    var minDate = dateDim.bottom(1)[0]["date"];
    var maxDate = dateDim.top(1)[0]["date"];

    // Charts instance
    var chart = dc.lineChart("#chart");
    var volumeChart = dc.barChart('#volume-chart');


    chart
        .renderArea(true)
        /* Make the chart as big as the bootstrap grid by not setting ".width(960)" */
        .height(350)
        .transitionDuration(1000)
        .margins({top: 30, right: 50, bottom: 25, left: 40})
        .dimension(dateDim)
        /* Grouped data to represent and label to use in the legend */
        .group(consByDate, "Consumed")
        /* Function to access grouped-data values in the chart */
        .valueAccessor(function (d) {
            return d.value;
        })
        /* x-axis range */
        .x(d3.time.scale().domain([minDate, maxDate]))
        /* Auto-adjust y-axis */
        .elasticY(true)
        .renderHorizontalGridLines(true)
        .legend(dc.legend().x(80).y(10).itemHeight(13).gap(5))
        /* When on, you can't visualize values, when off you can filter data */
        .brushOn(false)
        /* Add another line to the chart; pass (i) group, (ii) legend label and (iii) value accessor */
        .stack(prodByDate, "Produced", function(d) { return d.value; })
        /* Range chart to link the brush extent of the range with the zoom focus of the current chart. */
        .rangeChart(volumeChart)
        /* TODO test them */
        //.mouseZoomable(true)
        //.round(d3.time.month.round)
        //.xUnits(d3.time.months)
        //.xAxisLabel("Year")
        //.yAxis().ticks(4)
        ;

    volumeChart//.width(990)
        .height(60)
        .margins({top: 0, right: 50, bottom: 20, left: 40})
        .dimension(dateDim)
        .group(volumeByDateDim)
        .centerBar(true)
        .gap(1)
        .x(d3.time.scale().domain([minDate, maxDate]))
        //.round(d3.time.month.round)
        .alwaysUseRounding(true)
        //.xUnits(d3.time.months);


    // Render all graphs
    dc.renderAll();
};

在图表自定义中我排除了.width，因为我注意到这样firefox正在使用整个引导程序col-sm-12并在那里拉伸图表... 现在使用chrome这不会发生，我不知道如何使这种行为持续存在于其他浏览器...我试过的所有事情都失败了，我唯一可以使用的选择是使用固定的宽度，在较小的屏幕上看起来很糟糕...

提前感谢您的帮助

Answer 1

好吧，因为我没有得到更好的答案，我会发布＆＃34;快速和肮脏的＆＃34;我在使用viewBox和类似选项后遇到的解决方案。

使用这个：

<div id="chart" style="width:100%;"></div>

对于index.html做了诀窍，现在图表显示在firefox，chrome和edge的页面的整个宽度上。

我也用过这个：

<div class="row" style="width:100%;">

表示＆＃34;之前的行部分以避免水平条显示。

剩下的唯一问题是这不是非常敏感，如果我调整浏览器页面的大小，图表将保持相同的大小并且水平条不会出现...无论如何我可以依靠它生存现在，问题解决了。

dc.js和bootstrap网格，chrome和firefox

1 个答案: