如何在Dygraphs 2.2.1多图表中单独设置坐标轴标签颜色

有两种可靠的方法可以实现每个图表单独设置xlabel、ylabel、y2label的颜色，具体如下：

方法一：通过JavaScript在图表就绪后定位元素设置样式 #

利用每个图表容器的ID，结合标签元素的类名，在Dygraph的ready回调中精准定位目标标签并修改颜色。这种方式适合需要动态调整颜色的场景。

示例代码：

// 初始化第一个图表
const g0 = new Dygraph(document.getElementById('g0'), data0, {
  xlabel: '时间',
  ylabel: '数值1',
  y2label: '数值2'
});

// 在图表就绪后设置标签颜色
g0.ready(function() {
  // 设置x标签颜色
  document.querySelector('#g0 .dygraph-xlabel').style.color = '#ff4444';
  // 设置y标签颜色
  document.querySelector('#g0 .dygraph-ylabel').style.color = '#00aa00';
  // 设置y2标签颜色
  document.querySelector('#g0 .dygraph-y2label').style.color = '#0000cc';
});

// 初始化第二个图表
const g1 = new Dygraph(document.getElementById('g1'), data1, {
  xlabel: '日期',
  ylabel: '温度',
  y2label: '湿度'
});

g1.ready(function() {
  document.querySelector('#g1 .dygraph-xlabel').style.color = '#880088';
  document.querySelector('#g1 .dygraph-ylabel').style.color = '#ff8800';
  document.querySelector('#g1 .dygraph-y2label').style.color = '#008888';
});

方法二：通过CSS后代选择器实现静态单独设置 #

给每个图表容器添加自定义类名，利用CSS的后代选择器，仅对特定容器内的标签生效。这种方式无需编写额外JS，适合固定样式的场景。

1. 给图表容器添加自定义类：

<div id="g0" class="chart-1"></div>
<div id="g1" class="chart-2"></div>

2. 编写对应CSS规则：

/* 仅对chart-1容器内的标签生效 */
.chart-1 .dygraph-xlabel { color: #ff4444; }
.chart-1 .dygraph-ylabel { color: #00aa00; }
.chart-1 .dygraph-y2label { color: #0000cc; }

/* 仅对chart-2容器内的标签生效 */
.chart-2 .dygraph-xlabel { color: #880088; }
.chart-2 .dygraph-ylabel { color: #ff8800; }
.chart-2 .dygraph-y2label { color: #008888; }

说明 #

你之前尝试的document.getElementById("g0").style.color.dygraph-ylabel = "green"写法错误，原因是：style对象仅作用于当前元素，无法直接通过链式访问子元素的类名样式，必须先定位到目标子元素（即对应的标签元素），再修改其style.color属性。

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