个人中心
gpt4 book ai didi

javascript - 堆积条形图 : By Type and Quantity

转载 作者：行者123 更新时间：2023-11-30 14:18:14 27 4
gpt4 key购买 nike

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

基本上，我有两个变量:

类型:2018年，未涵盖，其他时期

地区 : Thu Duc, etc....

在我的 StackedBarChart 中，我想查看每个地区的 .

我试过使用这段代码:

var paymentsRecord = [{
    date: "2011-11-14T16:17:54Z",
    quantity: 2,
    total: 190,
    tip: 100,
    type: "tab"
  },
  {
    date: "2011-11-14T16:20:19Z",
    quantity: 2,
    total: 190,
    tip: 100,
    type: "tab"
  },
  {
    date: "2011-11-14T16:28:54Z",
    quantity: 1,
    total: 300,
    tip: 200,
    type: "visa"
  },
  {
    date: "2011-11-14T16:30:43Z",
    quantity: 2,
    total: 90,
    tip: 0,
    type: "tab"
  },
  {
    date: "2011-11-14T16:48:46Z",
    quantity: 2,
    total: 90,
    tip: 0,
    type: "tab"
  },
  {
    date: "2011-11-14T16:53:41Z",
    quantity: 3,
    total: 90,
    tip: 0,
    type: "tab"
  },
  {
    date: "2011-11-14T16:54:06Z",
    quantity: 1,
    total: 100,
    tip: 0,
    type: "cash"
  },
  {
    date: "2011-11-14T16:58:03Z",
    quantity: 2,
    total: 90,
    tip: 0,
    type: "tab"
  },
  {
    date: "2011-11-14T17:07:21Z",
    quantity: 2,
    total: 90,
    tip: 0,
    type: "tab"
  },
  {
    date: "2011-11-14T17:22:59Z",
    quantity: 2,
    total: 90,
    tip: 0,
    type: "tab"
  },
  {
    date: "2011-11-14T17:25:45Z",
    quantity: 2,
    total: 200,
    tip: 0,
    type: "cash"
  },
  {
    date: "2011-11-14T17:29:52Z",
    quantity: 1,
    total: 200,
    tip: 100,
    type: "visa"
  }
];

var facts = crossfilter(paymentsRecord);
var dimensionByType = facts.dimension(function(d) {
  return d.type;
});
var groupByType = dimensionByType.group().reduce(reduceAdd, reduceRemove, reduceInitial);


function reduceAdd(p, v) {
  p[v.quantity] = (p[v.quantity] || 0) + v.total;
  return p;
}

function reduceRemove(p, v) {
  p[v.quantity] = (p[v.quantity] || 0) - v.total;
  return p;
}

function reduceInitial() {
  return {};
}

var barChart = dc.barChart("#stackedBarChart")
  .width(1024)
  .height(200)
  .dimension(dimensionByType)
  .group(groupByType, "Quantity: 1", function(d) {
    return d.value[1] || 0;
  })
  .stack(groupByType, "Quantity: 2", function(d) {
    return d.value[2];
  })
  .stack(groupByType, "Quantity: 3", function(d) {
    return d.value[3];
  })
  .x(d3.scale.ordinal().domain(['tab', 'visa', 'cash']))
  .xUnits(dc.units.ordinal)
  .legend(dc.legend().x(500).y(1).itemHeight(15).gap(5));
barChart.yAxis().ticks(5);
barChart.xAxis().ticks(4);


dc.renderAll();
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.1/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.min.css" />
<h1>StackedBart Chart:By Type and Quantity</h1>
<div id="stackedBarChart"></div>

为了适应我的需求:

var universe = [{
    "KMIST_TEMP_ID": "KTMPVN12119",
    "ID POP": "",
    "type": 2018,
    "pop": "No",
    "name": "Nha Thuoc An Binh",
    "Country": "",
    "Province": "Ho Chi Minh Province",
    "City": "Ho Chi Minh",
    "district": "Thu Duc",
    "ward": "Linh Trung",
    "name_full": "Ho Chi Minh ,Nha Thuoc An Binh ,Thu Duc, Linh Trung",
    "latitude": 10.8539167,
    "longitude": 106.7716921,
    "geo": "106.7716921,10.8539167",
    "amenity": "pharmacy",
    "date_entered": "2015-10-30T00:00:00",
    "date_issued": "2015-10-30T00:00:00"
  },

  {
    "KMIST_TEMP_ID": "KTMPVN12119",
    "ID POP": "",
    "type": 2018,
    "pop": "No",
    "name": "Nha Thuoc An Binh",
    "Country": "",
    "Province": "Ho Chi Minh Province",
    "City": "Ho Chi Minh",
    "district": "first",
    "ward": "Linh Trung",
    "name_full": "Ho Chi Minh ,Nha Thuoc An Binh ,Thu Duc, Linh Trung",
    "latitude": 10.8539167,
    "longitude": 106.7716921,
    "geo": "106.7716921,10.8539167",
    "amenity": "pharmacy",
    "date_entered": "2015-10-30T00:00:00",
    "date_issued": "2015-10-30T00:00:00"
  },

  {
    "KMIST_TEMP_ID": "KTMPVN12119",
    "ID POP": "",
    "type": "Never Covered",
    "pop": "No",
    "name": "Nha Thuoc An Binh",
    "Country": "",
    "Province": "Ho Chi Minh Province",
    "City": "Ho Chi Minh",
    "district": "new",
    "ward": "Linh Trung",
    "name_full": "Ho Chi Minh ,Nha Thuoc An Binh ,Thu Duc, Linh Trung",
    "latitude": 10.8539167,
    "longitude": 106.7716921,
    "geo": "106.7716921,10.8539167",
    "amenity": "pharmacy",
    "date_entered": "2015-10-30T00:00:00",
    "date_issued": "2015-10-30T00:00:00"
  },

  {
    "KMIST_TEMP_ID": "KTMPVN12119",
    "ID POP": "",
    "type": "Other Periods",
    "pop": "No",
    "name": "Nha Thuoc An Binh",
    "Country": "",
    "Province": "Ho Chi Minh Province",
    "City": "Ho Chi Minh",
    "district": "Thu Duc",
    "ward": "Linh Trung",
    "name_full": "Ho Chi Minh ,Nha Thuoc An Binh ,Thu Duc, Linh Trung",
    "latitude": 10.8539167,
    "longitude": 106.7716921,
    "geo": "106.7716921,10.8539167",
    "amenity": "pharmacy",
    "date_entered": "2015-10-30T00:00:00",
    "date_issued": "2015-10-30T00:00:00"
  }
];



var xdata = crossfilter(universe);
var dimensionByType = xdata.dimension(function(d) {
  return d.district;
});
var groupByType = dimensionByType.group().reduce(reduceAdd, reduceRemove, reduceInitial);


function reduceAdd(p, v) {
  p[v.type] = (p[v.type] || 0) + v.total;
  return p;
}

function reduceRemove(p, v) {
  p[v.type] = (p[v.type] || 0) - v.total;
  return p;
}

function reduceInitial() {
  return {};
}

var barChart = dc.barChart("#stackedBarChart")
  .width(1024)
  .height(200)
  .dimension(dimensionByType)
  .group(groupByType, "Type: 1", function(d) {
    return d.value[1] || 0;
  })
  .stack(groupByType, "Type: 2", function(d) {
    return d.value[2];
  })
  .stack(groupByType, "Type: 3", function(d) {
    return d.value[3];
  })
  .elasticX(true)
  .xUnits(dc.units.ordinal)
  .legend(dc.legend().x(500).y(1).itemHeight(15).gap(5));
barChart.yAxis().ticks(5);
barChart.xAxis().ticks(4);


dc.renderAll();
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.1/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.min.css" />

<h1>StackedBart Chart:By Type and Quantity</h1>
<div id="stackedBarChart"></div>
<div id="stackedBarChart2"></div>

如何才能满足我的需求？

最佳答案

你必须像这样设置 x 比例(即使你使用 .elasticX(true)):

.x(d3.scale.ordinal())

另请注意，在 .group 中和 .stack回调你必须使用与 reduceAdd 中相同的名称和 reduceRemove使用(type 属性)。
由于您的数据集缺少 total属性和任何类似我选择显示的值 latitude在下面的演示中:

var universe = [{
    "KMIST_TEMP_ID": "KTMPVN12119",
    "ID POP": "",
    "type": 2018,
    "pop": "No",
    "name": "Nha Thuoc An Binh",
    "Country": "",
    "Province": "Ho Chi Minh Province",
    "City": "Ho Chi Minh",
    "district": "Thu Duc",
    "ward": "Linh Trung",
    "name_full": "Ho Chi Minh ,Nha Thuoc An Binh ,Thu Duc, Linh Trung",
    "latitude": 10.8539167,
    "longitude": 106.7716921,
    "geo": "106.7716921,10.8539167",
    "amenity": "pharmacy",
    "date_entered": "2015-10-30T00:00:00",
    "date_issued": "2015-10-30T00:00:00"
  },

  {
    "KMIST_TEMP_ID": "KTMPVN12119",
    "ID POP": "",
    "type": 2018,
    "pop": "No",
    "name": "Nha Thuoc An Binh",
    "Country": "",
    "Province": "Ho Chi Minh Province",
    "City": "Ho Chi Minh",
    "district": "first",
    "ward": "Linh Trung",
    "name_full": "Ho Chi Minh ,Nha Thuoc An Binh ,Thu Duc, Linh Trung",
    "latitude": 10.8539167,
    "longitude": 106.7716921,
    "geo": "106.7716921,10.8539167",
    "amenity": "pharmacy",
    "date_entered": "2015-10-30T00:00:00",
    "date_issued": "2015-10-30T00:00:00"
  },

  {
    "KMIST_TEMP_ID": "KTMPVN12119",
    "ID POP": "",
    "type": "Never Covered",
    "pop": "No",
    "name": "Nha Thuoc An Binh",
    "Country": "",
    "Province": "Ho Chi Minh Province",
    "City": "Ho Chi Minh",
    "district": "new",
    "ward": "Linh Trung",
    "name_full": "Ho Chi Minh ,Nha Thuoc An Binh ,Thu Duc, Linh Trung",
    "latitude": 10.8539167,
    "longitude": 106.7716921,
    "geo": "106.7716921,10.8539167",
    "amenity": "pharmacy",
    "date_entered": "2015-10-30T00:00:00",
    "date_issued": "2015-10-30T00:00:00"
  },

  {
    "KMIST_TEMP_ID": "KTMPVN12119",
    "ID POP": "",
    "type": "Other Periods",
    "pop": "No",
    "name": "Nha Thuoc An Binh",
    "Country": "",
    "Province": "Ho Chi Minh Province",
    "City": "Ho Chi Minh",
    "district": "Thu Duc",
    "ward": "Linh Trung",
    "name_full": "Ho Chi Minh ,Nha Thuoc An Binh ,Thu Duc, Linh Trung",
    "latitude": 10.8539167,
    "longitude": 106.7716921,
    "geo": "106.7716921,10.8539167",
    "amenity": "pharmacy",
    "date_entered": "2015-10-30T00:00:00",
    "date_issued": "2015-10-30T00:00:00"
  }
];



var xdata = crossfilter(universe);
var dimensionByType = xdata.dimension(function(d) {
  return d.district;
});
var groupByType = dimensionByType.group().reduce(reduceAdd, reduceRemove, reduceInitial);


function reduceAdd(p, v) {
  p[v.type] = (p[v.type] || 0) + v.latitude;
  return p;
}

function reduceRemove(p, v) {
  p[v.type] = (p[v.type] || 0) - v.latitude;
  return p;
}

function reduceInitial() {
  return {};
}

var barChart = dc.barChart("#stackedBarChart")
  .width(1024)
  .height(200)
  .dimension(dimensionByType)
  .group(groupByType, "Type: Never Covered", function(d) {
    return d.value['Never Covered'] || 0;
  })
  .stack(groupByType, "Type: 2018", function(d) {
    return d.value['2018'] || 0;
  })
  .stack(groupByType, "Type: Other Periods", function(d) {
    return d.value["Other Periods"] || 0;
  })
  .elasticY(true)
  .x(d3.scale.ordinal())
  .elasticX(true)
  .xUnits(dc.units.ordinal)
  .legend(dc.legend().x(500).y(1).itemHeight(15).gap(5));
barChart.yAxis().ticks(5);
barChart.xAxis().ticks(4);


dc.renderAll();
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.1/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.9/dc.min.css" />

<h1>StackedBart Chart:By Type and Quantity</h1>
<div id="stackedBarChart"></div>
<div id="stackedBarChart2"></div>

关于javascript - 堆积条形图 : By Type and Quantity，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53185675/

27 4 0
文章推荐： javascript - 当另一个字段不为空时需要输入字段
文章推荐： macos - 将连续色井数据传递到第二个 View Controller
文章推荐： swift - 在 Storyboard之间保留导航 Controller (快速)
文章推荐： c# - WPF - 用户控件非常慢
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com