如何修改function-plot中导数函数的绘图颜色？

我正在使用JavaScript的function-plot库绘制函数及其导数，主函数sin(x)可以通过添加color:'red'修改颜色，但在derivative块中直接设置color无法改变导数线条的颜色，希望将默认的浅蓝色导数线改为其他颜色。原绘图参数代码如下：

var parameters = {
  target: '#myFunction',
  data: [{
    fn: 'sin(x)',
    derivative: {
      fn: "cos(x)",
      x0: 5,
    }
  }],
  grid: true,
  yAxis: {
    domain: [-1, 1]
  },
  xAxis: {
    domain: [0, 2 * Math.PI]
  }
};

解决方案 #

function-plot的derivative配置项不支持直接用color设置线条颜色，需要通过attrs对象定义SVG样式属性，用stroke指定颜色：

var parameters = {
  target: '#myFunction',
  data: [{
    fn: 'sin(x)',
    color: 'red', // 主函数颜色
    derivative: {
      fn: "cos(x)",
      x0: 5,
      attrs: {
        stroke: '#ff0000', // 导数线条颜色（示例为红色）
        strokeWidth: 2 // 可选：调整线条宽度
      }
    }
  }],
  grid: true,
  yAxis: {
    domain: [-1, 1]
  },
  xAxis: {
    domain: [0, 2 * Math.PI]
  }
};

如果需要更灵活的控制，也可以把导数函数作为独立的data条目，直接用color属性设置：

var parameters = {
  target: '#myFunction',
  data: [
    {
      fn: 'sin(x)',
      color: 'red' // 主函数颜色
    },
    {
      fn: 'cos(x)',
      color: '#00ff00', // 导数函数颜色（示例为绿色）
      // 可选：添加x0对应的标记点
      points: [{x: 5, y: Math.cos(5), type: 'scatter'}]
    }
  ],
  grid: true,
  yAxis: {
    domain: [-1, 1]
  },
  xAxis: {
    domain: [0, 2 * Math.PI]
  }
};

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