时间戳

首页 > 解决方案 > dc.js：费用跟踪器，在饼图中显示每个月的分布

d3.js - dc.js：费用跟踪器，在饼图中显示每个月的分布

问题描述

我正在尝试制作一个饼图，显示每个月不同类别的费用。比如，当我给出一月份时，切片应该显示杂货、燃料、租金等。我怎样才能用这些数据来做呢？

代码

function show_monthly_exp_distribution(ndx) {
    var dim = ndx.dimension(dc.pluck('Month'));
    var group = dim.group().reduceCount(dc.pluck());

    dc.pieChart("#exp-pie")
      .height(300)
      .width(800)
      .radius(70)
      .transitionDuration(1000)
      .dimension(dim)
      .group(group)
      .legend(dc.legend().gap(7));
  }

csv数据

Month,Utility Bills,Groceries,Dining Out,Fuel,Rent,totalexp
January,100,500,100,90,1000,1400
February,120,450,50,120,1000,1740
March,130,550,120,60,1000,1860
April,100,300,80,150,1000,1630
May,90,600,75,80,1000,1845
June,130,560,150,90,1100,2030
July,70,610,120,100,1100,2000
August,120,459,100,80,1100,1859
September,140,432,80,90,1100,1842
October,60,456,110,110,1100,1836
November,80,487,60,180,1200,2007
December,150,390,210,100,1200,2050

标签： d3.jsdc.jscrossfilter

解决方案

正如 Gordon 建议的那样，首先更改数据的格式，这样每行只有一个数据点。如果您无法更改 csv 上的数据，则可以在 js 中进行（代码未经测试，可能直接工作......或不工作；）

var data = [];
var type = "Utility Bills,Groceries,Dining Out,Fuel,Rent".split(",");
d3.csv("yourcsv", function(d) {
  type.forEach(function(c){
    data.push({month:d.month,type:c,amount:+d[c]});
  });
  return null; //doesn't matter what you return, discard the initial csv anyway)
}).then (function(dummy){
   ndx=crossfilter(data);      
});

完成此操作后，您可以轻松地使用一个图表来过滤月份（或 selectMenu 图表）和您的饼图

推荐阅读