1
간단한 대시 보드를 구현하려고하지만 Firefox와 크롬 사이에 폭 문제가 발생합니다 (이 분야에서는 경험이 없습니다). 모든 것은 파이어 폭스에서 완벽하게 작동하지만 크롬에서는 완전히 뻗어 있습니다.dc.js와 부트 스트랩 그리드, 크롬과 파이어 폭스간에 다른 차트 폭 사이징
<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>
를 그리고 자바 스크립트 하나 :
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을 제외
이
내가 HTML에있는 선택된 부분입니다 전체 부트 스트랩col-sm-12 및 거기에 차트를 스트레칭 ... 크롬이 이제는 이런 일이 일어나지 않습니다.이 동작을 다른 브라우저에서 유지하는 방법을 모르겠습니다 ... 실패한 모든 것들과 onl 내가 사용할 수있는 Y 옵션은 내가 더 좋은 답을하지 않기 때문에 도움
안녕하십니까. dc.js 태그를 사용하십시오. 차트 라이브러리에 대한 질문 - dc는 아주 다른 것입니다. – Gordon