d3.js - 向使用 c3js 制作的条形图添加图标
问题描述
我使用 c3 库制作了一个堆积条形图,并希望为每一列添加图标(使用 c3 或 d3)。我浏览了他们的文档,但似乎没有任何相关功能!
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100],
['data2', 130, 100, 140]
],
type: 'bar',
groups: [['data1', 'data2']]
},
});
解决方案
您可以导入 font-awesome 然后(误)使用 c3 的标签格式配置为每个系列设置一个图标
var chart = c3.generate({
data: {
columns: [
['data1', 30, -200, -100, 400, 150, 250],
['data2', -50, 150, -150, 150, -50, -150],
['data3', -100, 100, -40, 100, -150, -50]
],
groups: [
['data1', 'data2']
],
type: 'bar',
labels: {
// format: function (v, id, i, j) { return "Default Format"; },
format: {
data1: function (v, id, i, j) { return "\uf1ec"; }, // a calculator
data2: function (v, id, i, j) { return "\uf212"; }, // a book
data3: function (v, id, i, j) { return "\uf1ae"; }, // a human
}
}
},
grid: {
y: {
lines: [{value: 0}]
}
}
});
你需要这个 css 规则 -->
.c3-chart-text .c3-text {
font-family: 'FontAwesome';
}
并导入 FontAwesome css 以访问字形(这可能是旧版本)-->
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
字形代码可以在这里找到 -->
推荐阅读
- laravel - 如何同步()方法附加数据透视表 Laravel
- pandas - 在整个 DataFrame 的两个 pandas 行之间应用函数的有效方法
- javascript - Component.prototype 未定义
- c++ - 我正在尝试用 c++ 填充 arr 并将其展示给用户。我的代码正在运行,但是当程序要求我按下任何按钮时出现错误
- selenoid - 发出连接 Selenoid GGR (Go Grid Router)
- css - 是否可以使用 user-scalable=no 水平滚动?
- google-slides-api - 使用 Google Slides API 有没有办法知道形状中文本的高度?
- php - Laravel "^6.18.35" “目标 [Illuminate\Contracts\Bus\Dispatcher] 不可实例化。”
- amazon-web-services - 分布式设置中的 AWS 数据传输估计值
- javascript - 开玩笑 - 找不到模块