1
最近、dc.jsを使用している円グラフが正しく更新されていません。 dimension.filterAll()は正常に動作し、dc.renderAll()はページを更新してグラフを再描画しますが、グラフにはフィルタリング対象のデータが反映されません。 ここにコードがあります。dc.js pieChartがfilterAll()の後に更新されない
<script>
var data = [{date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
{date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
{date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
{date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}];
var parseDate = d3.time.format("%m/%d/%Y").parse;
data.forEach(function (d) {
d.date = parseDate(d.date);
d.total = d.http_404 + d.http_200 + d.http_302;
d.Year = d.date.getFullYear();
});
var yearDim;
$(document).ready(function() {
var cx = crossfilter(data);
yearDim = cx.dimension(function (d) { return d.Year; });
var yearGroup = yearDim.group().reduce(
function (p, v) {
++p.count;
return p;
},
function (p, v) {
--p.count;
return p;
},
function() {
return {
count: 0
};
}
);
mypie = dc.pieChart('#pie-chart');
mypie
.dimension(yearDim)
.group(yearGroup)
.valueAccessor(function (d) {
return d.value.count;
});
dc.renderAll();
});
function resetYear() {
yearDim.filterAll();
dc.redrawAll();
dc.renderAll();
}
</script>
<body>
<div class="container-fluid">
<div>
<button type="button" onclick="resetYear();">Year</button>
</div>
</div>
</body>