dc.js条形图的不同颜色
dc.js条形图的不同颜色
提问于 2018-06-09 20:16:48
我正在尝试使用d3.js和dc.js创建一个条形图(而不是行图)。我可以创建的酒吧ok，但他们都是相同的颜色。
我试过了：
- ordinalColors()
- scaleOrdinal.range()
- Renderlet
- colorAccessor
但它们都为所有条提供了一种颜色，除了colorAccessor，它根本不显示条。
我使用的是dc.js (版本3.0.2)、d3.js (版本5.4.0)和crossfilter (版本1.3.5)。
谁能告诉我一种方法，将工作，以获得不同的颜色，我的每一个酒吧吗？
下面是我的代码：
fruits = [{
"name": "apple",
"cnt": 10
},
{
"name": "orange",
"cnt": 15
},
{
"name": "banana",
"cnt": 12
},
{
"name": "grapefruit",
"cnt": 2
},
{
"name": "grapefruit",
"cnt": 4
},
{
"name": "pomegranate",
"cnt": 1
},
{
"name": "lime",
"cnt": 12
},
{
"name": "grape",
"cnt": 50
}
];
var ndx = crossfilter(fruits);
fruitDimension = ndx.dimension(function(d) {
return d.name;
}),
sumGroup = fruitDimension.group().reduceSum(function(d) {
return d.cnt;
});
fruitColours = d3.scaleOrdinal().range(["red", "yellow", "purple", "pink", "green", "orange", "blue"]);
barChart
// .ordinalColors(["red", "yellow", "purple", "pink", "green", "orange", "blue"])
// .ordinalColors(fruitColours)
// .ordinalColors(["#79CED7", "#66AFB2", "#C96A23", "#D3D1C5", "#F5821F"])
.width(768)
.height(380)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.brushOn(false)
.xAxisLabel('Fruit')
.yAxisLabel('Quantity Sold')
.dimension(fruitDimension)
.barPadding(0.1)
.outerPadding(0.05)
.group(sumGroup)
.colorAccessor(["#79CED7", "#66AFB2", "#C96A23", "#D3D1C5", "#F5821F", "grey", "purple"])
// .on("renderlet", function(chart){
// var colors =d3.scaleOrdinal().domain(["apple", "orange", "banana", "grapefruit", "pomegranate", "lime", "grape"])
// .range(["steelblue", "brown", "red", "green", "yellow", "grey", "purple"]);
// chart.selectAll('rect.bar').each(function(d){
//// d3.select(this).attr("style", "fill: " + colors(d.key)); // use key accessor if you are using a custom accessor
// d3.select(this).attr("style", "fill: " + colors(d.name)); // use key accessor if you are using a custom accessor
// });
// });
;
dc.renderAll();<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>School Donations Dashboard</title>
<link rel="stylesheet" href="vendor/css/bootstrap.min.css" />
<link rel="stylesheet" href="vendor/css/dc.css" />
<link rel="stylesheet" href="vendor/css/keen-dashboards.css" />
<link rel="stylesheet" href="css/custom.css" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.xhtml">Dashboard</a>
</div>
</div>
</div>
<div id="outer" class="container-fluid">
<!-- Test Bar Chart -->
<div class="chartWrapper">
<div class="chartTitle">
Bar Chart
</div>
<div class="chartStage">
<div id="barChart"></div>
</div>
</div>
<!-- Test Bar Chart -->
</div>
<!-- /outer -->
<hr />
<script src="vendor/js/jquery.min.js">
</script>
<script src="vendor" name="js/bootstrap.min.js">
</script>
<script src="vendor" name="js/crossfilter.js">
</script>
<script src="vendor/js/d3-v5.min.js">
</script>
<script src="vendor/js/d3-scale.min.js">
</script>
<script src="vendor/js/dc.js">
</script>
<script src="vendor/js/queue.js">
</script>
<script src="vendor/js/keen.min.js">
</script>
<script src="js/graph.js">
</script>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-10 10:08:54
看起来您遇到的问题是颜色访问器(.colorAccessor())和色标(.colors())的角色之间的混淆。
在所有dc.js图表中，将使用一个访问器函数来获取应该确定颜色的值。然后，该值将通过色标传递，以确定实际颜色。
这很方便，因为在大多数情况下，您的数据中不会有实际的颜色。色标从您的数据中提取一些值并将其映射到一种颜色。
当您指定colorAccessor时，您需要为它提供一个函数，该函数获取组以{key, value}形式提供的数据，并提取您希望映射到颜色的值。
如果要更改所使用的颜色，可以使用.colors()，提供适合您的数据的d3比例，也可以使用方便的函数.ordinalColors()或.linearColors()，提供所需的颜色。
这就是大多数图表所需要的。但是对于堆叠图(条形图和折线图)，您还需要指定颜色访问器。这是因为默认情况下，堆栈混合使用层(堆栈名称)来设置颜色的关键帧：
_chart.colorAccessor(function (d) {
var layer = this.layer || this.name || d.name || d.layer;
return layer;
});因此，如果您希望每个条形图的颜色都是唯一的，那么基于组键的颜色访问器是一个很好的选择：
chart
.colorAccessor(d => d.key)
.ordinalColors(["#79CED7", "#66AFB2", "#C96A23", "#D3D1C5", "#F5821F", "grey", "purple"]);
但是，您需要确保指定的序号颜色至少与条形图一样多，因为当域的大小大于范围时，序号标度将重复。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50774206
复制相关文章
相似问题