Plotly JS Bar图表柱内文本字体出现灰色描边问题求助

我最近在用Plotly JS绘制柱状图时碰到了一个头疼的小问题：柱内配置的纯黑色文本，实际渲染出来却变成了灰色边框包裹黑色内部的奇怪效果。翻遍Plotly官方文档也没找到相关的配置项能调整这个，先贴出我的代码：

var trace1 = { 
  name: 'Protein Unit', 
  x: ['2-167','2-75','2-138','2-241','77-138','77-167','139-167','139-241','168-241','168-205','168-341','206-241','242-341',], 
  y: [2,3,2,1,2,1,3,1,4,1,1,1,7,], 
  text: ['166','74','137','240','62','91','29','103','74','38','174','36','100',], 
  textfont:{ family: 'sans-serif, -apple-system, BlinkMacSystemFont', color: 'rgba(0, 0, 0, 1)' }, 
  font: { family: 'sans-serif, -apple-system, BlinkMacSystemFont', size: 14, color: 'rgba(0, 0, 0, 1)' }, 
  textposition: 'auto', 
  marker: { 
    color: ['rgba(6, 150, 104, 1)', 'rgba(209, 41, 180, 1)', 'rgba(81, 243, 16, 1)', 'rgba(190, 107, 124, 1)', 'rgba(150, 218, 49, 1)', 'rgba(255, 42, 13, 1)', 'rgba(128, 80, 199, 1)', 'rgba(53, 200, 239, 1)', 'rgba(234, 70, 109, 1)', 'rgba(157, 28, 244, 1)', 'rgba(205, 219, 155, 1)', 'rgba(250, 209, 57, 1)', 'rgba(100, 221, 150, 1)', ], 
    line: { color: "rgba(0, 0, 0, 1)", width: 0.5 } 
  }, 
  opacity: 0.7, 
  type: "bar", 
};
var data = [trace1];
var layout = { 
  font: { family: 'IBM Plex Sans, sans-serif, -apple-system, BlinkMacSystemFont', size: 17 }, 
  bargap: 0.02, 
  bargroupgap: 0.2, 
  barmode: 'stack', 
  margin: { b: 100, autoexpand: true }, 
  title: "Boundaries", 
  xaxis: {title: "PU", type: 'category', tickangle: '35'}, 
  yaxis: {title: "Count", dtick: 1 }, 
};
var config = {responsive: true};
Plotly.newPlot('pus_hist', data, layout, config);

临时修复方案 #

一开始我只能先找个临时办法解决表面问题：通过检查页面CSS，发现文本对应的g.point类被添加了带颜色的描边样式：

g.point { fill: #2f225d; stroke: #afa2dc; }

于是我在自定义CSS样式表里覆盖了这个规则：

g.point { fill: #2f225d; stroke: none; }

这样文本就恢复成纯黑色了，但我一直没搞懂为什么会出现这个样式。

根源问题与彻底解决 #

后来终于找到问题的罪魁祸首！原来我页面里除了Plotly的常规库之外，还引入了另一个第三方JS库：

<script src="https://cdn.jsdelivr.net/gh/calipho-sib/feature-viewer@v1.1.0/dist/feature-viewer.bundle.js"></script>

这个库修改了全局的g.point CSS类，给元素添加了描边样式，刚好和Plotly柱状图里的文本元素选择器冲突，才导致了文本的异常显示。只要处理好这个库的样式冲突（比如修改选择器范围、移除不必要的全局样式），就能彻底解决这个问题。

内容的提问来源于stack exchange，提问作者Gabriel Cretin