billboard.js -根据标签值设置颜色，以便给定标签的数据在多个图表中的颜色一致
billboard.js -根据标签值设置颜色，以便给定标签的数据在多个图表中的颜色一致
提问于 2019-09-18 02:50:43
我有多个条形图，每个条形图显示多个项目的单个数据值。我希望条形图的颜色在所有图表中的每个项目都是一致的。
以下是数据的示例：
Items Data1 Data2 Data3 Data4 Dogs 5 50 18 27 Cats 9 33 26 30 Hamsters 5 22 8 43
图1显示了狗、猫和仓鼠的Data1值，图2显示了狗、猫和仓鼠等的Data2值。
我希望狗的条形总是绿色的，猫的条形总是蓝色的，仓鼠的条形在所有图表中都是黄色的。这个是可能的吗？
看看我看到的billboard.js应用程序接口，我可以设置数据的颜色，但是这会将特定数据字段的颜色设置为所有项的颜色，以便在只显示Data1的图表上，每个条形都是相同的颜色。
我看过的其他图表库(highcharts，c3，谷歌)似乎也有类似的限制。有没有其他方法来解决这个问题，或者我忽略了什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-09-24 17:11:38
您可以通过组合使用bb.defaults()和data.color选项来完成此操作。查看代码片段示例。
// set default options for whole charts.
bb.defaults({
data: {
x: "x",
type: "bar",
color: function(color, d) {
// specify colors you need
return ["red", "green", "blue"][d.index]
}
},
axis: {
x: {
type: "category"
}
}
});
// All generated charts will be defaulted from above options.
var chart = bb.generate({
data: {
columns: [
["x", "Dogs", "Cats", "Hamsters"],
["data1", 5, 9, 5]
]
}
});
var chart = bb.generate({
bindto: "#chart2",
data: {
columns: [
["x", "Dogs", "Cats", "Hamsters"],
["data1", 50, 33, 22]
]
}
});
var chart = bb.generate({
bindto: "#chart3",
data: {
columns: [
["x", "Dogs", "Cats", "Hamsters"],
["data1", 18, 26, 8]
]
}
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>billboard.js</title>
<link rel="stylesheet" href="https://unpkg.com/billboard.js/dist/theme/insight.css">
<script src="https://unpkg.com/billboard.js/dist/billboard.pkgd.min.js"></script>
<style>
.bb {
width: 300px;
height: 220px;
}
</style>
</head>
<body>
<div id="chart"></div>
<div id="chart2"></div>
<div id="chart3"></div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57980366
复制相关文章
相似问题
腾讯云开发者
