V5版本设置使用回调函数设置style，回调函数参数错误

[chiga0]

问题描述

我使用最新版本的G2绘制图表时，发现使用回调函数动态设置style时，回调函数的三个参数都返回了整个数组，而不是单个项目的值。与文档不一致。
文档链接：https://g2.antv.antgroup.com/manual/core/style

重现链接

https://codesandbox.io/p/sandbox/bold-glitter-wpyx6l?file=%2Findex.ts%3A26%2C45

重现步骤

运行Demo，可以参考下console.log打印出来的值。

预期行为

我理解回调函数应该作用于数组中的每一项， 基于单项中的特定值设置不同的样式， 而不是作用于整个数组。

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[hustcc]

柱形图返回的是数组每一项，折线图返回的是数组，因为折线图的一条线是数组中的数据绘制的。

[chiga0]

你好，我的原始场景是想同时基于同一个Y轴，绘制堆叠面积图 + 折线图， 堆叠面积图表示不用的阈值划分， 折线图是当前日期的实际值，折线颜色需要遵循不同的阈值规则展示不同的颜色。实际效果有点类似于下图，但目前折线颜色无法根据阈值动态设置：

最终希望折线图颜色可以实现下图效果：

我尝试使用了scale.color设置通道映射规则，但使用scale.color 设置规则时，发现scale 是作用于整个Graph的，会同时影响堆叠面积图。 我的实现代码如下，还请指导一下，谢谢。

https://codesandbox.io/p/sandbox/frosty-wildflower-3536kv?file=%2Findex.ts%3A64%2C11，

[hustcc]

下面这张图的阈值颜色不一样的核心原理是利用 canvas 的渐变色，只不过这里的渐变色是两个颜色突变。

.scale('color', {
    type: 'threshold',
    domain: [medianValue],
    range: ['black', 'red'],
  })

.style('gradient', 'y')

[hustcc]

在你的 demo 中，给 scale 增加

independent: true,

应该可以解决你问题了。

[chiga0]

嗯嗯，按照回复，增加了如下设置确实可以了，

.scale('color', {
    type: 'threshold',
    domain: [medianValue],
    range: ['black', 'red'],
  })
 .style("gradient", "y")

最终效果如下，完美实现了我的诉求，感谢感谢[送花]