1
私は単純なダッシュボードを実現しようとしていますが、firefoxとchromeの間の幅の問題が発生しています。すべてがfirefoxでは完璧に機能しますが、クロムでは完全に伸びています。dc.jsとブートストラップグリッド、クロムとfirefoxで異なるチャート幅のサイジング
これは私がHTMLに持って選択した部分である：私はこの方法でFirefoxが使用していたことに気づいたので、私は.widthを除外し、チャートのカスタマイズで
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();
};
：
<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 ♥</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 1 クロムで、これは起こっていません。この動作を他のブラウザで持続させる方法がわかりません...私が失敗したすべてのものとonl私が使用することができyのオプションは、私が任意のより良い答えを得ることはありませんから、私は掲載する予定助けを事前に
おかげで
こんにちは、dc.jsタグを使用してくださいチャーティング・ライブラリーについての質問 - dcはまったく別のものです。 – Gordon