如何通过类名选择无ID的Highcharts轴标签元素并在现有文本后追加内容

问题原因 #

你之前直接对父元素.highcharts-axis-labels的innerHTML直接赋值，会直接覆盖父元素内所有原有子节点，导致原来的<text>标签和内容全部丢失。

实现代码 #

// 匹配所有x轴标签下的text子元素
const xAxisLabels = document.querySelectorAll('.highcharts-xaxis-labels text');
// 遍历每个标签修改文本
xAxisLabels.forEach(label => {
  label.textContent += ' Sales';
});

方案说明 #

• 用querySelectorAll匹配父级分类下所有的<text>标签元素，无需给元素设置ID也能精准定位
• 直接修改每个<text>元素的textContent属性，仅追加文本内容，不会破坏元素原有的坐标、样式、属性配置，完全保留highcharts的原有渲染效果
• 修改纯文本优先使用textContent而非innerHTML，可以避免潜在的XSS风险，性能也更优
• 若图表是异步渲染生成，建议将这段代码放在highcharts的render事件回调中执行，避免节点未加载导致匹配失效

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