Javascript 堆叠条形图：按类型和数量

使用Dc.Js和crossfilter，我想创建一个堆叠条形图

基本上，我有两个变量：

类型：2018年，未涵盖，其他期间

地区：Thu-Duc等

在我的堆叠条形图中，我希望看到每个地区的

我试过使用这个代码：

var付款记录=[{
日期：“2011-11-14T16:17:54Z”，
数量：2，
总数：190，
提示：100，
类型：“选项卡”
},
{
日期：“2011-11-14T16:20:19Z”，
数量：2，
总数：190，
提示：100，
类型：“选项卡”
},
{
日期：“2011-11-14T16:28:54Z”，
数量：1，
总数：300，
提示：200，
类型：“签证”
},
{
日期：“2011-11-14T16:30:43Z”，
数量：2，
总数：90，
提示：0，
类型：“选项卡”
},
{
日期：“2011-11-14T16:48:46Z”，
数量：2，
总数：90，
提示：0，
类型：“选项卡”
},
{
日期：“2011-11-14T16:53:41Z”，
数量：3，
总数：90，
提示：0，
类型：“选项卡”
},
{
日期：“2011-11-14T16:54:06Z”，
数量：1，
总数：100，
提示：0，
类型：“现金”
},
{
日期：“2011-11-14T16:58:03Z”，
数量：2，
总数：90，
提示：0，
类型：“选项卡”
},
{
日期：“2011-11-14T17:07:21Z”，
数量：2，
总数：90，
提示：0，
类型：“选项卡”
},
{
日期：“2011-11-14T17:22:59Z”，
数量：2，
总数：90，
提示：0，
类型：“选项卡”
},
{
日期：“2011-11-14T17:25:45Z”，
数量：2，
总数：200，
提示：0，
类型：“现金”
},
{
日期：“2011-11-14T17:29:52Z”，
数量：1，
总数：200，
提示：100，
类型：“签证”
}
];
var事实=交叉过滤（付款记录）；
var dimensionByType=事实。维度（函数（d）{
返回d.type；
});
var groupByType=dimensionByType.group（）.reduce（reducead、reduceRemove、reduceInitial）；
函数还原D（p，v）{
p[v.quantity]=（p[v.quantity]| | 0）+v.total；
返回p；
}
功能减速机移动（p，v）{
p[v.数量]=（p[v.数量]| | 0）-v.总计；
返回p；
}
函数还原初始（）{
返回{}；
}
var barChart=dc.barChart（#stackedBarChart”）
.宽度（1024）
.身高（200）
.尺寸（按类型标注）
.组（groupByType，“数量：1”，函数（d）{
返回d.value[1]| | 0；
})
.堆栈（groupByType，“数量：2”，函数（d）{
返回d.value[2]；
})
.堆栈（groupByType，“数量：3”，函数（d）{
返回d.value[3]；
})
.x（d3.scale.ordinal（）.domain（['tab'，'visa'，'cash']））
.xUnits（dc.units.序数）
.图例（dc.legend（）.x（500）.y（1）.项目高度（15）.间隙（5））；
barChart.yAxis（）.ticks（5）；
barChart.xAxis（）.ticks（4）；
dc.renderAll（）

StackedBart图表：按类型和数量
您必须设置x刻度（即使您使用
.elasticX（true）
），如下所示：

.x(d3.scale.ordinal())

还要注意的是，在
.group
和
.stack
回调中，您必须使用与
reducead
和
reduceRemove
中使用的名称相同的名称（
类型
属性）。


由于您的数据集缺少
total
属性和任何类似于我在以下演示中选择显示的
latitude
的值：


var-universe=[{
“KMIST_TEMP_ID”：“KTMPVN12119”，
“ID POP”：“，
“类型”：2018年，
“pop”：“No”，
“名称”：“Nha Thuoc An Binh”，
“国家”：“，
“省”：“胡志明省”，
“城市”：“胡志明”，
“地区”：“Thu-Duc”，
“病房”：“Linh Trung”，
“全名”：“胡志明、Nha Thuoc An Binh、Thu Duc、Linh Trung”，
“纬度”：10.8539167，
“经度”：106.7716921，
“geo”：“106.7716921,10.8539167”，
“便利”：“药房”，
“输入日期”：“2015-10-30T00:00:00”，
“发布日期”：“2015-10-30T00:00:00”
},
{
“KMIST_TEMP_ID”：“KTMPVN12119”，
“ID POP”：“，
“类型”：2018年，
“pop”：“No”，
“名称”：“Nha Thuoc An Binh”，
“国家”：“，
“省”：“胡志明省”，
“城市”：“胡志明”，
“地区”：“第一”，
“病房”：“Linh Trung”，
“全名”：“胡志明、Nha Thuoc An Binh、Thu Duc、Linh Trung”，
“纬度”：10.8539167，
“经度”：106.7716921，
“geo”：“106.7716921,10.8539167”，
“便利”：“药房”，
“输入日期”：“2015-10-30T00:00:00”，
“发布日期”：“2015-10-30T00:00:00”
},
{
“KMIST_TEMP_ID”：“KTMPVN12119”，
“ID POP”：“，
“类型”：“从未覆盖”，
“pop”：“No”，
“名称”：“Nha Thuoc An Binh”，
“国家”：“，
“省”：“胡志明省”，
“城市”：“胡志明”，
“地区”：“新”，
“病房”：“Linh Trung”，
“全名”：“胡志明、Nha Thuoc An Binh、Thu Duc、Linh Trung”，
“纬度”：10.8539167，
“经度”：106.7716921，
“geo”：“106.7716921,10.8539167”，
“便利”：“药房”，
“输入日期”：“2015-10-30T00:00:00”，
“发布日期”：“2015-10-30T00:00:00”
},
{
“KMIST_TEMP_ID”：“KTMPVN12119”，
“ID POP”：“，
“类型”：“其他期间”，
“pop”：“No”，
“名称”：“Nha Thuoc An Binh”，
“国家”：“，
“省”：“胡志明省”，
“城市”：“胡志明”，
“地区”：“Thu-Duc”，
“病房”：“Linh Trung”，
“全名”：“胡志明、Nha Thuoc An Binh、Thu Duc、Linh Trung”，
“纬度”：10.8539167，
“经度”：106.7716921，
“geo”：“106.7716921,10.8539167”，
“便利”：“药房”，
“输入日期”：“2015-10-30T00:00:00”，
“发布日期”：“2015-10-30T00:00:00”
}
];
变量扩展数据=交叉过滤器（宇宙）；
var dimensionByType=xdata.dimension（函数（d）{
返回d区；
});
var groupByType=dimensionByType.group（）.reduce（reducead、reduceRemove、reduceInitial）；
函数还原D（p，v）{
p[v.type]=（p[v.type]| | 0）+v.纬度；
返回p；
}
功能减速机移动（p，v）{
p[v.type]=（p[v.type]| | 0）-v.纬度；
返回p；
}
函数还原初始（）{
返回{}；
}
var barChart=dc.barChart（#stackedBarChart”）
.宽度（1024）
.身高（200）
.尺寸（按类型标注）
.group（groupByType，“类型：从不覆盖”，函数（d）{
返回