代码之家  ›  专栏  ›  技术社区  ›  MBehtemam Erick

交叉滤波器和dc.js中的平均值

reductio crossfilter dc.js d3.js
  •  0
  • MBehtemam Erick  · 技术社区  · 7 年前

    在我的应用程序中,我有两个图表和一个表。图表名称是 sellerChart 和 dateUnitPriceChart 表名为 datatable 为了 塞勒哈特 ,我创建这样的维度,然后绘制图表: 

    var sellerDimension = data.dimension(function (d) {
        return d.slr_Name;
    });
var sellerGroup = sellerDimension.group().reduceSum(function (d) {
        return d.fdl_Num;
    });

    如您所见,使用reducesum,这是我想要的,但对于另一个图表,我想使用average,但目前它使用reducesum,就像这样 

    var dateDimension = data.dimension(function (d) {
        return d.fct_Date;
    });
var unitPriceGroup = dateDimension.group().reduceSum(function
        (d) {
        return d.fdl_UniyPrice;
    });

    为了显示我尝试使用的平均值 reductio 这样地: 

    var unitPriceGroup = dateDimension.group()
    var reducer = reductio()
    .count(true)
    .sum(function (d) {
        return d.fdl_UniyPrice;
    })
    .avg(true);
reducer(unitPriceGroup);

    现在我已经在减速器中取了平均值,但是图表只显示了x和y轴,没有任何信息,所以我的问题是如何根据 fdl_UniyPrice . 我创建了一个 JS Fiddle ,我的代码从第43行开始,我的数据从第42行开始。

    1 回复  |  直到 6 年前
        1
  •  1
  •   Aravind Cheekkallur    7 年前

    在查看您的数据并根据您的解释的同时,可以使用自定义的reduce函数来实现avg计算。通过使用 dateDimension 创建分组函数以获取平均值。所以不管 slr_Name 和 mrq_Requester_dep_title ,它将为每个日期创建组,并汇总 fdl_UniyPrice . 

    var dateDimension = data.dimension(function (d) {
        return d.fct_Date;
    });
var unitPriceGroup = dateDimension.group().reduce(
        //return d.fdl_UniyPrice;
        //add
    function (p, v) {
        ++p.count;
        p.total += v.fdl_UniyPrice;
        if (p.count == 0) {
            p.average = 0;
        } else {
            p.average = p.total / p.count;
        }
        return p;
    },
    // remove
    function (p, v) {
        --p.count;
        p.total -= v.fdl_UniyPrice;
        if (p.count == 0) {
            p.average = 0;
        } else {
            p.average = p.total / p.count;
        }
        return p;
    },
    // initial
    function () {
        return {
            count: 0,
            total: 0,
            average: 0
        };
    }
);


    var myData = [{"slr_Name":"handStore","fct_Date":"10/31/2016","fdl_UniyPrice":40000,"fdl_TotalPrice":2400000,"ShamsiDate":"1395/08/10","mrq_No":"335","drq_SaleSplName":"MBA","mrq_Requester_dep_title":"boss office","fdl_Num":60},{"slr_Name":"Sh Store","fct_Date":"12/12/2016","fdl_UniyPrice":50000,"fdl_TotalPrice":60000,"ShamsiDate":"1395/09/22","mrq_No":"357","drq_SaleSplName":"MBA","mrq_Requester_dep_title":"Start Up","fdl_Num":1.2},{"slr_Name":"handStore","fct_Date":"12/18/2016","fdl_UniyPrice":44000,"fdl_TotalPrice":96800,"ShamsiDate":"1395/09/28","mrq_No":"344","drq_SaleSplName":"MBA","mrq_Requester_dep_title":"Select Office","fdl_Num":2.2},{"slr_Name":"handStore","fct_Date":"12/18/2016","fdl_UniyPrice":40000,"fdl_TotalPrice":1240000,"ShamsiDate":"1395/09/28","mrq_No":"326","drq_SaleSplName":"MBA","mrq_Requester_dep_title":"U Office","fdl_Num":31},{"slr_Name":"handStore","fct_Date":"12/20/2016","fdl_UniyPrice":42000,"fdl_TotalPrice":2142000,"ShamsiDate":"1395/09/30","mrq_No":"340","drq_SaleSplName":"MBA","mrq_Requester_dep_title":"MH","fdl_Num":51},{"slr_Name":"N Brothers","fct_Date":"12/21/2016","fdl_UniyPrice":38000,"fdl_TotalPrice":1140000,"ShamsiDate":"1395/10/01","mrq_No":"440","drq_SaleSplName":"MBA","mrq_Requester_dep_title":"Start Up","fdl_Num":30},{"slr_Name":"N Brothers","fct_Date":"12/21/2016","fdl_UniyPrice":38000,"fdl_TotalPrice":2432000,"ShamsiDate":"1395/10/01","mrq_No":"423","drq_SaleSplName":"MBA","mrq_Requester_dep_title":"U Office","fdl_Num":64},{"slr_Name":"N Brothers","fct_Date":"12/26/2016","fdl_UniyPrice":38000,"fdl_TotalPrice":1710000,"ShamsiDate":"1395/10/06","mrq_No":"420","drq_SaleSplName":"MBA","mrq_Requester_dep_title":"Managements","fdl_Num":45},{"slr_Name":"handStore","fct_Date":"12/27/2016","fdl_UniyPrice":44000,"fdl_TotalPrice":1320000,"ShamsiDate":"1395/10/07","mrq_No":"345","drq_SaleSplName":"MBA","mrq_Requester_dep_title":"Finance","fdl_Num":30},{"slr_Name":"handStore","fct_Date":"12/27/2016","fdl_UniyPrice":40000,"fdl_TotalPrice":280000,"ShamsiDate":"1395/10/07","mrq_No":"337","drq_SaleSplName":"MBA","mrq_Requester_dep_title":"Manage and create","fdl_Num":7},{"slr_Name":"Store 2","fct_Date":"12/28/2016","fdl_UniyPrice":38000,"fdl_TotalPrice":874000,"ShamsiDate":"1395/10/08","mrq_No":"424","drq_SaleSplName":"MBA","mrq_Requester_dep_title":"Start Up","fdl_Num":23},{"slr_Name":"handStore","fct_Date":"1/8/2017","fdl_UniyPrice":44000,"fdl_TotalPrice":264000,"ShamsiDate":"1395/10/19","mrq_No":"425","drq_SaleSplName":"MBA","mrq_Requester_dep_title":"human resource","fdl_Num":6},{"slr_Name":"handStore","fct_Date":"2/21/2017","fdl_UniyPrice":47000,"fdl_TotalPrice":117500,"ShamsiDate":"1395/12/03","mrq_No":"553","drq_SaleSplName":"MBA","mrq_Requester_dep_title":"Doctors","fdl_Num":2.5},{"slr_Name":"handStore","fct_Date":"3/3/2017","fdl_UniyPrice":55000,"fdl_TotalPrice":3300000,"ShamsiDate":"1395/12/13","mrq_No":"577","drq_SaleSplName":"MBA","mrq_Requester_dep_title":"Human2","fdl_Num":60},{"slr_Name":"handStore","fct_Date":"3/26/2017","fdl_UniyPrice":70000,"fdl_TotalPrice":252000,"ShamsiDate":"1396/01/06","mrq_No":"1","drq_SaleSplName":"MBA","mrq_Requester_dep_title":"boss office","fdl_Num":3.6},{"slr_Name":"B Store","fct_Date":"5/2/2017","fdl_UniyPrice":68000,"fdl_TotalPrice":89760,"ShamsiDate":"1396/02/12","mrq_No":"324","drq_SaleSplName":"MBA","mrq_Requester_dep_title":"boss office","fdl_Num":1.32},{"slr_Name":"Y Store","fct_Date":"5/7/2017","fdl_UniyPrice":40000,"fdl_TotalPrice":1360000,"ShamsiDate":"1396/02/17","mrq_No":"303","drq_SaleSplName":"AZ","mrq_Requester_dep_title":"D & F Manage","fdl_Num":34},{"slr_Name":"handStore","fct_Date":"5/9/2017","fdl_UniyPrice":53600,"fdl_TotalPrice":268000,"ShamsiDate":"1396/02/19","mrq_No":"866","drq_SaleSplName":"AZ","mrq_Requester_dep_title":"manage office","fdl_Num":5},{"slr_Name":"Y Store","fct_Date":"5/14/2017","fdl_UniyPrice":70000,"fdl_TotalPrice":1062600,"ShamsiDate":"1396/02/24","mrq_No":"445","drq_SaleSplName":"ES Ja","mrq_Requester_dep_title":"Wom","fdl_Num":15.18},{"slr_Name":"handStore","fct_Date":"5/24/2017","fdl_UniyPrice":50000,"fdl_TotalPrice":300000,"ShamsiDate":"1396/03/03","mrq_No":"866","drq_SaleSplName":"AZ","mrq_Requester_dep_title":"manage office","fdl_Num":6},{"slr_Name":"Y Store","fct_Date":"5/29/2017","fdl_UniyPrice":50000,"fdl_TotalPrice":920000,"ShamsiDate":"1396/03/08","mrq_No":"866","drq_SaleSplName":"AZ","mrq_Requester_dep_title":"manage office","fdl_Num":18.4},{"slr_Name":"Y Store","fct_Date":"8/19/2017","fdl_UniyPrice":37000,"fdl_TotalPrice":370000,"ShamsiDate":"1396/05/28","mrq_No":"2496","drq_SaleSplName":"AZ","mrq_Requester_dep_title":"D & F Manage","fdl_Num":10},{"slr_Name":"Sh Store","fct_Date":"9/4/2017","fdl_UniyPrice":65000,"fdl_TotalPrice":195000,"ShamsiDate":"1396/06/13","mrq_No":"2885","drq_SaleSplName":"MBA","mrq_Requester_dep_title":"D Center","fdl_Num":3},{"slr_Name":"Y Store","fct_Date":"10/9/2017","fdl_UniyPrice":40000,"fdl_TotalPrice":800000,"ShamsiDate":"1396/07/17","mrq_No":"3753","drq_SaleSplName":"AZ","mrq_Requester_dep_title":"D & F Manage","fdl_Num":20},{"slr_Name":"handStore","fct_Date":"10/19/2017","fdl_UniyPrice":40000,"fdl_TotalPrice":520000,"ShamsiDate":"1396/07/27","mrq_No":"4068","drq_SaleSplName":"F P","mrq_Requester_dep_title":"MH","fdl_Num":13},{"slr_Name":"Seasson Store","fct_Date":"10/21/2017","fdl_UniyPrice":35000,"fdl_TotalPrice":4060000,"ShamsiDate":"1396/07/29","mrq_No":"4068","drq_SaleSplName":"F P","mrq_Requester_dep_title":"MH","fdl_Num":116},{"slr_Name":"Seasson Store","fct_Date":"10/21/2017","fdl_UniyPrice":29000,"fdl_TotalPrice":2610000,"ShamsiDate":"1396/07/29","mrq_No":"3898","drq_SaleSplName":"F P","mrq_Requester_dep_title":"MH","fdl_Num":90},{"slr_Name":"Seasson Store","fct_Date":"10/22/2017","fdl_UniyPrice":30000,"fdl_TotalPrice":180000,"ShamsiDate":"1396/07/30","mrq_No":"4068","drq_SaleSplName":"F P","mrq_Requester_dep_title":"MH","fdl_Num":6},{"slr_Name":"Aba Store","fct_Date":"10/23/2017","fdl_UniyPrice":30000,"fdl_TotalPrice":300000,"ShamsiDate":"1396/08/01","mrq_No":"1","drq_SaleSplName":"","mrq_Requester_dep_title":"Store","fdl_Num":10},{"slr_Name":"Aba Store","fct_Date":"4/8/2018","fdl_UniyPrice":32000,"fdl_TotalPrice":224000,"ShamsiDate":"1397/01/19","mrq_No":"4142","drq_SaleSplName":"MBA","mrq_Requester_dep_title":"EST","fdl_Num":7},{"slr_Name":"Hob Store","fct_Date":"5/12/2018","fdl_UniyPrice":32000,"fdl_TotalPrice":96000,"ShamsiDate":"1397/02/22","mrq_No":"2","drq_SaleSplName":"MBA","mrq_Requester_dep_title":"Center Off","fdl_Num":3}];

//var parseDate = d3.timeFormat("%m %d %Y").parse;

myData.forEach(function (d) {
	var parseDate = d3.timeParse("%m/%d/%Y")
	d.fct_Date = parseDate(d.fct_Date);
	/* var newD = new Date(d.fct_Date);
	var jdate3 = new JDate(newD); */
	formatYear = d3.timeFormat("%Y");
	d.year = formatYear(d.fct_Date);
});

var data = crossfilter(myData);
var sellers = [];
for (var d in myData) {
	if (sellers.indexOf(myData[d].slr_Name) == -1) {
		sellers.push(myData[d].slr_Name);
	}
}
// var colorScale = d3.scale.ordinal().range(['#DB0A5B', '#F62459', '#F1A9A0', '#2C3E50', '#26A65B', '#E87E04', '#D35400']);
var sellerDimension = data.dimension(function (d) {
		return d.slr_Name;
	});
var sellerGroup = sellerDimension.group().reduceSum(function (d) {
		return d.fdl_Num;
	});
var sellerChart = dc.barChart('#sellerChart');
sellerChart
.height(300)
.width(700)
.dimension(sellerDimension)
.group(sellerGroup)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.xAxisLabel('Sellers')
.yAxisLabel('Count')
.elasticX(true)
.elasticY(true)
.xAxis().ticks(3);

sellerChart.title(function (d) {
	return d.key + ' : ' + d.value;
});
// sellerChart.xAxis().tickValues([]);

// sellerChart.colors(d3.scale.ordinal().range(colorScale));


/**************************************************/
/* Data Unit Price Chart
/**************************************************/
var dateDimension = data.dimension(function (d) {
		return d.fct_Date;
	});
var unitPriceGroup = dateDimension.group().reduce(
		//return d.fdl_UniyPrice;
		//add
	function (p, v) {
        ++p.count;
        p.total += v.fdl_UniyPrice;
        if (p.count == 0) {
            p.average = 0;
        } else {
            p.average = p.total / p.count;
        }
        return p;
    },
	// remove
    function (p, v) {
        --p.count;
        p.total -= v.fdl_UniyPrice;
        if (p.count == 0) {
            p.average = 0;
        } else {
            p.average = p.total / p.count;
        }
        return p;
    },
	// initial
    function () {
        return {
            count: 0,
            total: 0,
            average: 0
        };
	}
);
var formatTime = d3.timeFormat("%B %d, %Y");
var minDate = formatTime(dateDimension.bottom(1)[0].fct_Date);
var maxDate = formatTime(dateDimension.top(1)[0].fct_Date);

var dateUnitPriceChart = dc.lineChart('#dateunitprice');
dateUnitPriceChart
.height(250)
.width(700)
.curve(d3.curveStepAfter)
.renderArea(true)
.dimension(dateDimension)
.group(unitPriceGroup)
.brushOn(true)
.elasticX(true)
.elasticY(true)
.valueAccessor(function (d) {
	return d.value.average;
})
.x(d3.scaleTime());

/* dateUnitPriceChart.xAxis().tickFormat(function (val) {
	console.log(val);
	var newD = new Date(val);
	var jdate3 = new JDate(newD);
	if (jdate3.getMonth() === 1) {
		return jdate3.format('YYYY'); //return a year in number like 1396
	}
	return jdate3.format('MMMM'); //return month like azar
}); */
dateUnitPriceChart.margins().left = 70;

/** Create Data Table */
var datatable = dc.dataTable('#data-table');

datatable
.dimension(sellerDimension)
.group(function (d) {
	return d.year;
})
.size(10000)
// dynamic columns creation using an array of closures
.columns([
		function (d) {
			return d.mrq_No
		},
		function (d) {
			return d.mrq_Requester_dep_title
		},
		function (d) {
			return d.drq_SaleSplName
		},
		function (d) {
			return d.slr_Name
		},
		function (d) {
			//return d.fct_Date.getFullYear() + ' ' + d.fct_Date.getMonth() + ' ' + d.fct_Date.getDate();
			return d.ShamsiDate;
		},
		function (d) {
			return d.fdl_UniyPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); ;
		},
		function (d) {
			return d.fdl_Num;
		}
	])
.showGroups(false)
.sortBy(function (d) {
	return d.slr_Name;
})
.order(d3.ascending);

datatable.title(function (d) {
	return d.key + ' : ' + d.value;
});

datatable.ordering(function (d) {
	return d.ShamsiDate
})
/***********************/

dc.renderAll();
    <link href="https://dc-js.github.io/dc.js/css/dc.css" rel="stylesheet"/>
<script src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
</script>

<div style="margin-top: -50px;">
        <div class="divForms" style="border: solid; border-color: gray; border-radius: 5px; border-width: 1px; text-align:center; padding-left:20px;">
            <div style="margin-bottom: 20px; width: 100%;">
                <div style="text-align: right; padding-right: 20px; float: right; width: 44%;">
                    <a id="lnk_Reset" href="javascript:dc.filterAll(); dc.renderAll();">Reset</a>
                </div>
                <div style="text-align: center; float: right;">
                    <span>کالا : </span>
                    <b>
                        <asp:Label ID="lbl_Good" runat="server" Text=""></asp:Label></b>
                </div>
            </div>
            <div id="sellerChart" style="direction: ltr !important"></div>
            <div id="dateunitprice" style="direction: ltr !important"></div>
            <table class="table table-condensed table-striped table-bordered table-hover no-margin" border="1" id="data-table" style="width: 100%; border-collapse: collapse; margin-left:5px;">
                <thead>
                    <tr class="HeaderStyle" style="color: #6484E5;">
                        <th class="text-center" scope="col">Num Request</th>
                        <th class="text-center" scope="col">Unit Requested</th>
                        <th class="text-center" scope="col">User</th>
                        <th class="text-center" scope="col">Seller</th>
                        <th class="text-center" scope="col">Date</th>
                        <th class="text-center" scope="col">Unit Price</th>
                        <th class="text-center" scope="col">Count</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    • 使用最新版本的DC和D3生成
    • 条形图替换为折线图(每个日期都有一条窄线)
    推荐文章
    关于  
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号