dc.js中带计数的条形图
Bar Chart with Counts in dc.js
我正在尝试创建一个条形图，该条形图将按标识符显示记录计数，但无法正确显示。
希望有人能看到这一点，发现我的问题所在。
我正在连接一个数据源，该数据源返回如下所示的对象数组：
[{
"pollCycleCount": 1,
"identifier": "21",
"value": "Value",
"timestamp": "2015-03-12T18:47:28-05:00",
"collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
"readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
"name": "name",
"description": "description"
},
...]
标识符字段将是我想要计数的数字。
这是我迄今为止的代码：
var dateFormat = d3.time.format.iso;
d3.json("http://url-to-web-service-that-returns-out-data")
.header("Content-Type", "application/json")
.post(JSON.stringify({"apiKey": "private_key", "collection":"D4B5D33B-9151-46BB-AF2A-71FDFEB5E573"}), function(error, data)
{
if(error)
{
console.log(error);
return;
}
console.log(data);
var xAxisUnits = [""];
data.forEach(function (d)
{
d.timestamp = dateFormat.parse(d.timestamp);
d.decodedValue = +d.decodedValue;
if(xAxisUnits.indexOf(d.identifier) == -1 && typeof d.identifier != "undefined")
{
xAxisUnits.push(d.identifier);
}
});
console.log(xAxisUnits);
var ndx = crossfilter(data);
var idCountDim = ndx.dimension(function(d) { return d.identifier; });
var idCountGroupCount = idCountDim.group().reduceCount(function(d) { return d.identifier; });
var barChart = dc.barChart("#barChart");
barChart.width(480)
.height(150)
.margins({top: 10, right: 10, bottom: 20, left: 40})
.dimension(idCountDim)
.group(idCountGroupCount)
.transitionDuration(500)
.centerBar(true)
.x(d3.scale.ordinal().domain(xAxisUnits))
.xUnits(d3.scale.ordinal)
.elasticY(true)
.xAxis().tickFormat();
dc.renderAll();
});
HTML文件体如下所示：
<body>
<script src="./js/crossfilter.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="./js/dc.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="./js/graph.js"></script><!-- Javascript referenced above. -->
<div id="barChart"></div>
</body>
这里的更新是一个返回的数据示例，应该显示三个小节，每个小节一个高。
[{
"pollCycleCount": 1,
"identifier": "21",
"value": "Value",
"timestamp": "2015-03-12T18:47:28-05:00",
"collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
"readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
"name": "name",
"description": "description"
},
{
"pollCycleCount": 1,
"identifier": "11",
"value": "Value2",
"timestamp": "2015-03-12T18:47:28-05:00",
"collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
"readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
"name": "name2",
"description": "description"
},
{
"pollCycleCount": 1,
"identifier": "31",
"value": "Value3",
"timestamp": "2015-03-12T18:47:28-05:00",
"collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
"readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
"name": "name3",
"description": "description"
}]
据我所知，只有一件事是错误的，那就是实际显示图表，尽管它可能不是你想要的那样。
首先，这里有一个有效的片段：
var dateFormat = d3.time.format.iso;
var data = [{
"pollCycleCount": 1,
"identifier": "21",
//"value": "Value",
"value": "100",
"timestamp": "2015-03-12T18:47:28-05:00",
"collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
"readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
"name": "name",
"description": "description"
},
{
"pollCycleCount": 1,
"identifier": "21",
//"value": "Value2",
"value": "120",
"timestamp": "2015-03-12T18:47:28-05:00",
"collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
"readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
"name": "name2",
"description": "description"
},
{
"pollCycleCount": 1,
"identifier": "11",
//"value": "Value2",
"value": "100",
"timestamp": "2015-03-12T18:47:28-05:00",
"collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
"readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
"name": "name2",
"description": "description"
},
{
"pollCycleCount": 1,
"identifier": "11",
//"value": "Value2",
"value": "100",
"timestamp": "2015-03-12T18:47:28-05:00",
"collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
"readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
"name": "name2",
"description": "description"
},
{
"pollCycleCount": 1,
"identifier": "11",
//"value": "Value2",
"value": "100",
"timestamp": "2015-03-12T18:47:28-05:00",
"collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
"readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
"name": "name2",
"description": "description"
},
{
"pollCycleCount": 1,
"identifier": "31",
//"value": "Value3",
"value": "100",
"timestamp": "2015-03-12T18:47:28-05:00",
"collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
"readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
"name": "name3",
"description": "description"
}];
/*
d3.json("http://url-to-web-service-that-returns-out-data")
.header("Content-Type", "application/json")
.post(JSON.stringify({"apiKey": "private_key", "collection":"D4B5D33B-9151-46BB-AF2A-71FDFEB5E573"}), function(error, data)
{
if(error)
{
console.log(error);
return;
}
*/
console.log(data);
var xAxisUnits = [""];
data.forEach(function (d) {
d.timestamp = dateFormat.parse(d.timestamp);
d.decodedValue = +d.value;
if(xAxisUnits.indexOf(d.identifier) == -1 && typeof d.identifier != "undefined")
{
xAxisUnits.push(d.identifier);
}
});
console.log(xAxisUnits);
var ndx = crossfilter(data);
var idCountDim = ndx.dimension(function(d) { return d.identifier; });
var idCountGroupCount = idCountDim.group().reduceCount(function(d) { return d.identifier; });
var barChart = dc.barChart("#barChart");
barChart.width(480)
.height(150)
.margins({top: 10, right: 10, bottom: 20, left: 40})
.dimension(idCountDim)
.group(idCountGroupCount)
.transitionDuration(500)
.centerBar(true)
.x(d3.scale.ordinal().domain(xAxisUnits))
.xUnits(dc.units.ordinal)
.elasticY(true)
.xAxis().tickFormat();
dc.renderAll();
/*
});
*/<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.min.js" charset="utf-8"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<div id="barChart"></div>变化是：
- 您的
xUnits被设置为d3.scale.ordinal，您实际上希望它是dc.units.ordinal，根据条形图中对x轴使用序数刻度（'；d3.scale.oordinal'；）
下面是另一个有进一步更改的片段：
var dateFormat = d3.time.format.iso;
var data = [{
"pollCycleCount": 1,
"identifier": "21",
//"value": "Value",
"value": "100",
"timestamp": "2015-03-12T18:47:28-05:00",
"collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
"readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
"name": "name",
"description": "description"
},
{
"pollCycleCount": 1,
"identifier": "21",
//"value": "Value2",
"value": "120",
"timestamp": "2015-03-12T18:47:28-05:00",
"collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
"readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
"name": "name2",
"description": "description"
},
{
"pollCycleCount": 1,
"identifier": "11",
//"value": "Value2",
"value": "100",
"timestamp": "2015-03-12T18:47:28-05:00",
"collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
"readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
"name": "name2",
"description": "description"
},
{
"pollCycleCount": 1,
"identifier": "11",
//"value": "Value2",
"value": "100",
"timestamp": "2015-03-12T18:47:28-05:00",
"collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
"readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
"name": "name2",
"description": "description"
},
{
"pollCycleCount": 1,
"identifier": "11",
//"value": "Value2",
"value": "100",
"timestamp": "2015-03-12T18:47:28-05:00",
"collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
"readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
"name": "name2",
"description": "description"
},
{
"pollCycleCount": 1,
"identifier": "31",
//"value": "Value3",
"value": "100",
"timestamp": "2015-03-12T18:47:28-05:00",
"collection": "D4B5D33B-9151-46BB-AF2A-71FDFEB5E573",
"readableTimestamp": "Thu Mar 12 2015 23:47:28 GMT+0000 (UTC)",
"name": "name3",
"description": "description"
}];
/*
d3.json("http://url-to-web-service-that-returns-out-data")
.header("Content-Type", "application/json")
.post(JSON.stringify({"apiKey": "private_key", "collection":"D4B5D33B-9151-46BB-AF2A-71FDFEB5E573"}), function(error, data)
{
if(error)
{
console.log(error);
return;
}
*/
console.log(data);
data.forEach(function (d) {
d.timestamp = dateFormat.parse(d.timestamp);
d.decodedValue = +d.value;
});
var ndx = crossfilter(data);
var idCountDim = ndx.dimension(function(d) { return d.identifier; });
var idCountGroupCount = idCountDim.group().reduceCount(function(d) { return d.identifier; });
var barChart = dc.barChart("#barChart");
barChart.width(480)
.height(150)
.margins({top: 10, right: 10, bottom: 20, left: 40})
.dimension(idCountDim)
.group(idCountGroupCount)
.transitionDuration(500)
.centerBar(true)
.x(d3.scale.ordinal().domain(d3.set(data.map(function(d) { return d.identifier; })).values()))
.xUnits(dc.units.ordinal)
.elasticY(true)
.xAxis().tickFormat();
dc.renderAll();
/*
});
*/<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.min.js" charset="utf-8"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<div id="barChart"></div>这里的变化是：
-
计算xAxisUnits（以及域）的方式似乎不正确，所以我将其替换为：
d3.set(data.map(function(d) { return d.identifier; })).values()这将创建一个包含所有唯一
identifier值的数组。
我认为它看起来不正确的原因是，其中有一个额外的空值（由于使用""初始化数组，这会创建一个空字符串作为数组中的第一个元素），而且它们没有排序。根据标识符值创建一个集合可以为您解决这个问题。
这不一定适合你的需求，但这对我来说是有意义的。
注意：数据中的value属性是字符串，并且您试图在代码中将它们强制为整数，这可能只是您提供的示例数据的一个特性，在任何情况下，在本示例中都没有任何区别。
相关文章：
- 用chart.js绘制条形图
- d3.js用按钮更新条形图工具提示
- 添加新数据时D3.JS条形图列偏移量
- Chart.js条形图:网格颜色和隐藏标签
- Chart.js 2.1.2条形图动画问题
- d3.js条形图转换无法正常工作
- d3.js组条形图不起作用
- 图表.js:条形图点击事件
- Raphael.js条形图及教程
- d3.js条形图未根据单击事件进行更新
- Chart.js条形图标签在悬停时被隐藏
- 将两个图形(饼图和条形图）并排对齐::d3-js
- D3.js条形图未显示
- D3.js更新堆叠条形图
- dc.js中带计数的条形图
- 如何为angular js条形图添加事件
- D3.js条形图:不显示 .text
- 如何在 d3.js 中创建分层条形图
- 动态生成条形图:JS, Jquery, CSS
- 在条形图Js 2.1.6上显示数据集值
