0
Dimensional Chartingのjavascriptライブラリdc.jsを使用して平均を示す線グラフを作成しました。私はrowchart、linechart、およびbarchartを表示しています。月ごとの平均線グラフは表示されません
1つのカテゴリを選択すると、年平均線グラフと月平均平均線グラフが表示されます。しかし、ある特定の年と1つのカテゴリを選択すると、月平均の折れ線グラフは表示されません。あなたが潜在的にゼロである何かで割るたびに注意する必要が
skuRowChart = dc.rowChart("#chart-row-spenders");
yearPieChart = dc.pieChart("#chart-pie-year");
yearLineChart = dc.lineChart('#Yearly-move-chart');
spendHistChart22 = dc.barChart("#chart-hist-spend22");
moveChart1 = dc.lineChart('#monthly-move-chart1');
function reduceAdd(p, v) {
++p.count;
p.total += v.sr;
p.average = p.total/p.count
return p;
}
function reduceRemove(p, v) {
--p.count;
p.total -= v.sr;
p.average = p.total/p.count
return p;
}
function reduceInitial() {
return {count: 0, total: 0, average: 0};
}
var parseDate = d3.time.format("%m/%d/%Y").parse;
var yearFormat = d3.time.format('%Y');
var monthFormat = d3.time.format("%m");
//var monthNameFormat = d3.time.format("%b");
var monthNameFormat = d3.time.format('%m.%b');
var
spendData = [
{ct:'KF', kw:'Amazon', sr: '35978',sd:'12/29/2016'},
{ct:'KF', kw:'Amazon', sr: '32178',sd:'11/2/2016'},
{ct:'KF', kw:'Amazon', sr: '30978',sd:'1/2/2017'},
{ct:'KF', kw:'Amazon', sr: '28978',sd:'1/15/2017'},
{ct:'KF',kw:'Build',sr:'28343',sd:'12/29/2016'},
{ct:'KF',kw:'Build',sr:'29653',sd:'11/29/2016'},
{ct:'KF',kw:'Build',sr:'26343',sd:'10/29/2016'},
{ct:'KF',kw:'Build',sr:'28343',sd:'2/2/2017'},
{ct:'KF',kw:'Build',sr:'28343',sd:'3/26/2017'},
{ct:'KF',kw:'Homedepot',sr:'221206',sd:'12/29/2016'},
{ct:'KF',kw:'Homedepot',sr:'203206',sd:'11/27/2016'},
{ct:'KF',kw:'Homedepot',sr:'193206',sd:'10/2/2016'},
{ct:'KF',kw:'wayfair',sr:'77794',sd:'12/29/2016'},
{ct:'KF',kw:'wayfair',sr:'71794',sd:'11/9/2016'},
{ct:'KF',kw:'wayfair',sr:'70794',sd:'1/9/2017'},
{ct:'KF',kw:'wayfair',sr:'74794',sd:'2/19/2017'},
{ct:'KF',kw:'wayfair',sr:'74794',sd:'3/21/2017'},
{ct:'KF',kw:'Houzz',sr:'408684',sd:'12/29/2016'},
{ct:'KF',kw:'Houzz',sr:'42684',sd:'11/22/2016'},
{ct:'KF',kw:'Houzz',sr:'46684',sd:'10/2/2016'},
{ct:'KF',kw:'Houzz',sr:'496684',sd:'1/2/2017'},
{ct:'KF',kw:'Houzz',sr:'49684',sd:'2/2/2017'},
{ct:'KF',kw:'Houzz',sr:'49664',sd:'3/2/2017'},
{ct:'KF',kw:'express',sr:'32004',sd:'12/29/2016'},
{ct:'KF',kw:'express',sr:'30004',sd:'11/2/2016'},
{ct:'KF',kw:'express',sr:'35004',sd:'10/2/2016'},
{ct:'KF',kw:'express',sr:'35004',sd:'12/2/2016'},
{ct:'KF',kw:'yahoo',sr:'115618',sd:'12/29/2016'},
{ct:'KF',kw:'yahoo',sr:'12546',sd:'10/2/2016'},
{ct:'KF',kw:'yahoo',sr:'65423',sd:'11/29/2016'},
{ct:'KF',kw:'yahoo',sr:'25698',sd:'10/29/2016'},
{ct:'KF',kw:'google',sr:'404991',sd:'1/29/2017'},
{ct:'KF',kw:'google',sr:'404991',sd:'2/2/2017'},
{ct:'KF',kw:'google',sr:'404991',sd:'3/12/2017'},
{ct:'KF',kw:'google',sr:'404991',sd:'3/3/2017'},
{ct:'KF',kw:'pingserach',sr:'273944',sd:'12/29/2016'}
];
// d3.csv("hhh.csv", function (error, salesrank) {
spendData.forEach(function (d) {
d.sr = +d.sr;
d.Date = parseDate(d.sd);
d.Year = yearFormat(d.Date);
d.Month = monthNameFormat(d.Date);
});
var ndx = crossfilter(spendData);
var all = ndx.groupAll();
SkuDim = ndx.dimension(function (d) {return d.kw; });
spendPerSku = SkuDim.group().reduceCount();
yearDim = ndx.dimension(function (d) {return d.Year; });
year_total = yearDim.group().reduceCount(function (d) {return d.sr;});
exptAvgGroup = yearDim.group().reduce(reduceAdd, reduceRemove, reduceInitial);
monthDim = ndx.dimension(function (d) {return d.Month; });
exptAvgGroup11 = monthDim.group().reduce(reduceAdd, reduceRemove, reduceInitial);
month_total = monthDim.group().reduceCount(function (d) { return d.sr;});
skuRowChart
.width(350)
.height(300)
.dimension(SkuDim)
.group(spendPerSku)
.elasticX(true)
.x(d3.scale.linear().domain([6, 20]))
.ordering(function (d) {
return -d.value
})
// .cap(40)
//.margins({top: -30, left: 0, right: 0, bottom: 0})
.controlsUseVisibility(true);
skuRowChart.data(function (group) {
return group.top(50);
});
yearPieChart
.width(250).height(250)
.dimension(yearDim)
.group(year_total)
.innerRadius(60)
.controlsUseVisibility(true);
yearLineChart
.width(380)
.height(280)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderArea(true)
.valueAccessor(function (p) {
//console.log("p.value.average: ", p.value.average) //displays the avg fine
return d3.round(p.value.average, 0);
})
//.brushOn(true)
.elasticY(true)
.xAxisLabel('Years')
.yAxisLabel('Review Count')
//.dimension(moveMonths)
.dimension(yearDim)
.group(exptAvgGroup)
//.margins({ top: 10, left: 60, right:40, bottom: 60 })
.margins({top: 0, left: 60, right: 30, bottom: 60})
spendHistChart22
.width(400).height(280)
.dimension(monthDim)
//.dimension(dateeddim)
// .group(dateeddimGroup)
.group(month_total)
.xAxisLabel('Months')
.yAxisLabel('')
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.ordering(function(d) { return d.key })
.elasticX(true)
.elasticY(true)
.margins({ top: 10, left: 60, right: 40, bottom: 60 })
.controlsUseVisibility(true)
spendHistChart22.xAxis().tickFormat(d => d.substr(3))
moveChart1
.width(380)
.height(310)
//.x(d3.scale.ordinal().domain(map(function (d) {return d.Month;})))
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.valueAccessor(function (p) {
//console.log("p.value.average: ", p.value.average) //displays the avg fine
return d3.round(p.value.average, 0);
})
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderArea(true)
//.clipPadding(10)
//.brushOn(false)
.elasticY(true)
.xAxisLabel('Months')
.yAxisLabel('')
.dimension(monthDim)
.group(exptAvgGroup11)
.margins({top: 40, left: 60, right: 30, bottom: 60})
moveChart1.xAxis().tickFormat(d => d.substr(3))
dc.renderAll();
https://jsfiddle.net/pramod24/kk4j0bzn/4/
コードを入力せずにjsfiddle.netを使用することからルールを回避するために、実際にコードとして書式設定しましたか？それは...勇敢です。とにかく、私はそれを修正し、それは有効な質問だと思う。 – Gordon