向C3图表图例上的每个实例添加字体强大的图标
向C3图表图例上的每个实例添加字体强大的图标
提问于 2018-05-31 00:19:23
我想为C3图表图例上的每个实例添加一个不同的字体超赞图标。
到目前为止，看起来我必须使用unicode，我已经找到了如何在D3图表中使用unicode，但不确定如何传输该信息。
我的代码是这样的.
var eventChart = c3.generate({
bindto: '#eventChart',
data: {
columns: [
['A', -1, -1, -1, -1, -1, 0],
['B', 1, 0, 1, 0, 1, 1],
['C', -1, 0, -1, 0, -1, -1]
],
axes: {
A:'y2',
B: 'y2',
C: 'y2',
},
type: 'bar',
legend: {
position: 'right',
}
},
}
});D3图表示例如下
node.append('text')
.attr('font-family', 'FontAwesome')
.attr('font-size', function(d) { return d.size+'em'} )
.text(function(d) { return '\uf118' });
graph.json#
{"nodes":[{"name":"Myriel","group":1},{"name":"Napoleon","group":1},
{"name":"Mlle.Baptistine","group":1},
{"name":"Mme.Magloire","group":1}]}谢谢
回答 1
Stack Overflow用户
发布于 2018-05-31 08:18:43
下面是我发现的有效代码。
var eventChart = c3.generate({
bindto: '#eventChart',
data: {
columns: [
['A', -1, -1, -1, -1, -1, 0],
['B', 1, 0, 1, 0, 1, 1],
['C', -1, 0, -1, 0, -1, -1]
],
axes: {
A:'y2',
B: 'y2',
C: 'y2',
},
type: 'bar',
legend: {
show:false,
position: 'right',
}
},} })；
d3.select('.container').insert('div','.eventChartlegend')
.attr('class', 'eventslegend').selectAll('span')
.data( ['A', 'B', 'C'])
.enter().append('span')
.attr('data-id', function (id) { return id; })
.html(function (id) { return id; })
.each(function (id) {
if(id === "A") {
d3.select(this).style('color',
eventChart.color(id)).attr('class',"fas fa-bug");
} else if(id === "B") {
d3.select(this).style('color',
eventChart.color(id)).attr('class',"fas fa-procedures");
} else if(id === "C") {
d3.select(this).style('color',
eventChart.color(id)).attr('class',"fas fa-cog");
} else {
d3.select(this).style('color', eventChart.color(id))
}
})-legend.css
.eventslegend span{
width: 33.333333%;
cursor: pointer;
color: white;}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50609381
复制相关文章
相似问题