如何修改Google Charts蜡烛图实现涨跌K线高低影线不同色

问题描述 #

需要修改蜡烛图高低点影线的颜色，实际修改时出现上涨、下跌蜡烛影线统一为同一种颜色的问题，错误效果如下：

期望实现上涨、下跌蜡烛影线跟随涨跌使用不同配色的效果，参考如下：

当前使用的代码：

const options = {
  legend: "none",
  candlestick: {
    fallingColor: { strokeWidth: 0, fill: "#f6465d" }, // 下跌红色
    risingColor: { strokeWidth: 0, fill: "#0ccb80" }, // 上涨绿色
  },
  colors: ['#0ccb80'],
};

const data = [
  ["Day", "", "", "", ""],
  ["Mon", 20, 28, 38, 45],
  ["Tue", 31, 38, 55, 66],
  ["Wed", 50, 55, 77, 80],
  ["Thu", 77, 77, 66, 50],
  ["Fri", 68, 66, 22, 15],
  ["Sat", 42, 54, 60, 100],
  ["Sun", 34, 56, 64, 80],
];

问题原因 #

• 配置中仅给涨跌蜡烛设置了实体填充色fill，没有单独配置影线对应的描边色stroke，还把描边宽度strokeWidth设为0
• 全局配置的colors: ['#0ccb80']会覆盖蜡烛图元素的默认描边颜色，导致所有影线都被强制渲染为绿色

修复方案 #

给涨跌配置项分别加上对应颜色的stroke（影线颜色）属性，将strokeWidth调整为合适的影线宽度（通常为1），删除会覆盖配色的全局colors配置即可，修改后的配置代码如下：

const options = {
  legend: "none",
  candlestick: {
    fallingColor: {
      strokeWidth: 1,
      fill: "#f6465d",
      stroke: "#f6465d" // 下跌影线设为红色，可按需修改为其他色值
    }, 
    risingColor: {
      strokeWidth: 1,
      fill: "#0ccb80",
      stroke: "#0ccb80" // 上涨影线设为绿色，可按需修改为其他色值
    },
  },
};

如果需要影线和实体颜色不一致，直接修改对应stroke字段的色值即可。

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