使用dc.js显示工作编号
我正试图让数字显示与图表和折线图一起工作。我做错了什么,但是什么 有关下面的代码,请参阅 我试图在数字显示中显示金额。单击pieChart时,数字应更新使用dc.js显示工作编号,dc.js,Dc.js,我正试图让数字显示与图表和折线图一起工作。我做错了什么,但是什么 有关下面的代码,请参阅 我试图在数字显示中显示金额。单击pieChart时,数字应更新 var parseDate = d3.time.format("%Y-%m-%d").parse; var json = [ { data: { amount: 450, total_amount: 97.331, unit_amount: 12.977, date: "2013-12-30" }, company
var parseDate = d3.time.format("%Y-%m-%d").parse;
var json = [
{
data: {
amount: 450,
total_amount: 97.331,
unit_amount: 12.977,
date: "2013-12-30"
},
company: {
id: 4,
name: "KLM"
}
},
{
data: {
amount: 960,
total_amount: 176.550,
unit_amount: 22.069,
date: "2014-01-06"
},
company: {
id: 4,
name: "KLM"
}
},
{
data: {
amount: 510,
total_amount: 93.793,
unit_amount: 11.034,
date: "2014-01-15"
},
company: {
id: 1,
name: "NS"
}
},
{
data: {
amount: 960,
total_amount: 207.640,
unit_amount: 25.955,
date: "2014-01-22"
},
company: {
id: 1,
name: "NS"
}
},
{
data: {
amount: 900,
total_amount: 194.6626,
unit_amount: 25.955,
date: "2014-02-12"
},
company: {
id: 1,
name: "NS"
}
}
];
var startDate = new Date(json[0].data.date);
var endDate = new Date(json[json.length-1].data.date);
json.forEach(function(d) {
d.data.date = parseDate(d.data.date);
});
// Set up dimensions and groups
var ndx = crossfilter(json),
date = ndx.dimension(function(d) { return d.data.date; }),
sumAmount = date.group().reduceSum(function(d) {return d.data.amount;}),
companyDimension = ndx.dimension(function(d) {
return d.company.name;
}),
companyDimensionGroup = companyDimension.group(function(d) {return d;})
;
// Charts
var numberDisplay = dc.numberDisplay('#number-chart');
numberDisplay.group(sumAmount)
.formatNumber(d3.format(".g"))
.valueAccessor( function(d) { return d.value } );
var chart = dc.lineChart("#date-chart");
chart.dimension(date)
.width(500)
.group(sumAmount, 'Amount')
.elasticY(true)
.round(d3.time.day.round)
.x(d3.time.scale()
.domain([startDate, endDate])
)
.filter([startDate, endDate]);
var pieChart = dc.pieChart("#pie-chart");
pieChart.dimension(companyDimension)
.group(companyDimensionGroup)
.width(300)
.height(300)
.slicesCap(4)
.innerRadius(30);
dc.renderAll();
我想您的意思是希望在日期图表中显示所有值的总和,在这种情况下,您需要使用
date.groupAll()
:
数字显示的一个奇怪之处是,即使它支持的.value()
方法,它仍然希望对返回的值应用valueAccessor。。。这是因为groupAll.value()
永远不会返回键/值对
因此,您需要指定标识访问器以使其正常工作:
numberDisplay.group(sumAllAmount)
.formatNumber(d3.format(".g"))
.valueAccessor( function(d) { return d; } );
更新的小提琴:你救了我的工作:p
numberDisplay.group(sumAllAmount)
.formatNumber(d3.format(".g"))
.valueAccessor( function(d) { return d; } );