[英]C3.js horizontal bar chart - Highlight a specific x-axis tick together with bar
我用 C3.js 创建了一个非常简单的水平条形图,它列出了我的 SQL 数据库中的数据。 该图表可以在没有任何过滤器的情况下自行访问,也可以通过使用 $_GET 从先前访问的页面传递数据来访问。
当用户来自将数据传递给图表的页面时,我希望图表突出显示上一页中的特定数据(x 轴刻度和条形图)。
我已经设法突出显示相关的刻度(这是一个文本),但是我无法突出显示或向相应的栏添加不同的颜色。
这是一个有效的JSfiddle示例
var chart = c3.generate({
size: {
height: 300,
width: 500,
},
data: {
x:'x',
columns: [
['nr',123,200,241,300,212,300],
['x','a','b','c','d','e','f'],
],
type : 'bar',
keys: {
x: 'Name',
value: ['nr']
}
},
axis: {
rotated: true,
x: {
type: 'category',
tick: {multiline:false,}
},
y: {
padding: {top:0, bottom:0},
tick: { multiline:false,
format: d3.format('s') }
}
},
bar: {
width: {
ratio: 0.5
}
},
grid: {
x: {
show: false
},
y: {
show: true
}
},
legend: {show: false},
tooltip: {
format: {
value: function (value, id) {
var format = id === 'nr' ? d3.format(',') : function (d) { return d + ' suffix'; };
return format(value);
}
}
}
});
var highLightTick = d3.selectAll('.c3-axis-x .tick')
.filter(function(){
return d3.select(this).text() === 'd'
})
.style('fill', 'black')
.style('font-size', '14px')
.style('font-weight', 'bold');
如何连接刻度线和相应的条,以便它们与数据的 rest 分开突出显示?
任何帮助将不胜感激,谢谢。
修改highLightTick并将mouseenter / mouseleave处理程序绑定到每个项目。
看到它在小提琴中工作
const highLightTick = (tick, isOn) => tick
.style('fill', isOn ? 'black' : 'gray')
.style('font-size', isOn ? '14px' : '12px')
.style('font-weight', isOn ? 700 : 400);
d3.selectAll('.c3-event-rect').each(function(d, i) {
const el = d3.select(this);
const tick = d3.select(`.tick:nth-of-type(${i + 1})`);
el.on('mouseenter', () => highLightTick(tick, true))
.on('mouseleave', () => highLightTick(tick, false))
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.