如何解决React Chartist:制作红色标签
我如何在图表上标注红色。我只想在周日和周六设置为红色,而其他设置为灰色:
.ct-label {
font-size: 9px;
color: red; // this is make all label the red
}
<div style={{height: '100%'}} className='position-relative ct-chart ct-hidden-points'>
<ChartistGraph
data={dataForChart}
options={options}
type='Line'
style={{height: '80px',width: '100%'}}
/>
</div>
解决方法
最丑陋的解决方案是:
- 使用浏览器的开发人员模式(F12)获取标签的xPath。
- 使用xPath查找元素。 (使用JavaScript或TypeScript)。
- 将CSS类添加到找到的元素中(使用JavaScript或TypeScript)。
我解决了将问题侦听器添加到图表的问题
function handleDrawChart(event) {
if (event.type === 'label' && event.axis.units.pos === 'x') {
if (event.text.match(/S[au]/gm)) {
/* eslint-disable-next-line */
event.element._node.children[0].style.color = 'red';
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。