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

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

转载作者：行者123 更新时间：2023-11-30 14:18:14

使用 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/

文章推荐： javascript - 当另一个字段不为空时需要输入字段

文章推荐： macos - 将连续色井数据传递到第二个 View Controller

文章推荐： swift - 在 Storyboard之间保留导航 Controller (快速)

文章推荐： c# - WPF - 用户控件非常慢

python - 如何在不使用 `quantities.Quantity` 对其进行子类化的情况下添加 `__array__` 行为？
quantities.Quantity 是 numpy.ndarray 的子类，用于处理物理量的算术和转换。我如何在不对其进行子类化的情况下使用它的算术？下面的方法使用了 __array__-meth
mysql - 根据匹配条件连接表，并从 Table1.Quantity 的总和中减去 Table2.Quantity 的总和以获取匹配行
我正在使用下面的代码:表1-添加，表2-删除 SELECT add.description, add.size, (sum(add.qty) - sum(remove.qty)) AS OnHand
mysql - 如何在 mySQL 中正确包装 sum(quantity) = max(sum(quantities)) ？
我想要取每个唯一属性的总和，然后取这些值的最大值。关于如何使用 mySQL 执行此操作有什么建议吗？我不断收到“无效使用群组功能”的消息。 +-------------+-------------+-
MySQL 查询 : find in which range quantity resides and then get the price of max quantity in the range
在构建查询方面需要帮助。我有 quantity_price 表，列出数量和相应的价格如下所示 Quantity Price----------------1 -- € 175,352.5 --
javascript - 堆积条形图 : By Type and Quantity
使用 Dc.Js 和 crossfilter，我想创建一个堆积条形图。基本上，我有两个变量: 类型:2018年，未涵盖，其他时期地区 : Thu Duc, etc.... 在我的 StackedB
Javax.measure.quantity.Duration转换问题
我正在使用 javax.measure 将用户输入转换为秒，秒数可以从秒到天不等，但是从任何单位转换为另一个单位不起作用，这是我设置的。 String units = "d"; double valu
mysql - 根据两个表同一列中 "quantity"的差异选择查询结果
表1: emp_id course_id ______ _________ 12345 4 23455 5 67890 6 表2: course_id cours
mysql - 为每个 'quantity' 选择一行
表: Article | Quantity | pricePerUnit | order_id | article_id --------|----------|-------------------
php - 为什么 'Quantity' 值不显示任何值？
我尝试显示数据库表中的数量值，但浏览器中未显示 $quantity 值。为什么？ prepare('SELECT * FROM cart WHERE Product_Name = :product')
JavaScript 对象，找不到 'quantity'
我正在为杂货店网站创建购物 list 应用程序。我是 javascript 新手，而且还不太了解 javascript 对象。我开始创建应用程序，这就是我所拥有的: http://casb1.clo
c# - CollectionViewSource分组，得到sum(Quantity)
我有一个 CollectionViewSource，它的源是一个 ObservableCollection。在 List 或 ObservableCollection 上，我可以使用 linq 对我
sql - 数据库表 : Quantity or redundancy
我正在构建一个数据库，其中包含自行车商店的大量商品。这家自行车店有许多相同的商品，例如 100 个尺寸为 4 且颜色为“红色”的车轮。我的问题是: 是向实体集添加“数量”字段并将所有相似项目放在一个实
.net - Quantity 或 Money 类的好例子
有人知道 .NET 中 Quantity (with Unit of Measure) 或 Money (with Currency) classesss/patterns 的一个很好的 .NET 实
mysql - 将一个表中的数据插入到另一个表中(第一个表中的字段最多为 `quantity` 字段)
我有一个 MySQL 表 creatures : id | name | base_hp | quantity -------------------------------- 1 | gobl
php - 如何使用foreach循环在mysqli中插入多个 `product`和 `quantity`
我想使用 foreach 循环在 mysql 中插入每个产品的多个 product 和 quantity 但代码如下仅插入我在输入字段中输入的最后一个产品。我使用 jquery 添加更多字段，这样我
php - osCommerce:如何将 'quantity' 字段从仅允许数字更改为所有字符？
它是在 MySQL 中还是在编程中...无法弄清楚!! 最佳答案在 mysql 表中，Quantity 被设置为“int”数据类型。您可以更改表格并将其更改为“varchar”数据类型，这样您也可以
javascript - 如何使用 js-quantities 转换为最佳前缀？
我的值为“1200000 mm”，并且我不想有一种自动转移到最佳前缀的方法，例如: import Qty from 'js-quantities' const qty = new Qty(120000
php - 更新 "quantity remaining"而不刷新站点
我有一个 HTML 网站，其中有一个页面使用 PHP 代码来查询 MySQL 数据库。该表包含 3 列(日期、时间、剩余)。根据当前日期和时间，我希望 HTML 页面返回并显示“剩余”列中的相应值。
c++ - 错误 : switch quantity not an integer
我已经通过 StackOverflow 和多谷歌链接研究了我的问题，但我仍然感到困惑。我想对我来说最好的事情就是问... 我正在创建一个简单的命令行计算器。到目前为止，这是我的代码: const st
openerp - 使用 xmlrpc 更新产品字段 "Quantity On Hand"
我正在尝试使用 PHP 和 xmlrpc 更新有关我的 odoo 产品的一些信息。这是我更新产品名称的代码。 $models->execute_kw($db, $uid, $password, 'pr

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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