如何实现自定义坐标label为不同的颜色 #3401

使用回调的方式来设置 label.style 属性。

chart.axis('x-field', {
  label: {
    style:  (item: any, index: number, items: any[]) => ShapeAttrs;
  }
})

“ShapeAttrs”是什么意思？这个code直接copy不可行。ShapeAttrs代表什么？能举个例子吗？比如是不是

                position: 'spider',
                offset: 40,
                text: 'name',
                style: (item, index, items) => { return { color: item.name } },
            })

这个例子我试过了，也行不通。

还有，如果要把connectorStroke也换成跟各自的Mark相同的颜色（这个例子里按照"name"分配颜色），可能吗？我在各个documentation里怎么找都没找到。。。

ShapeAttrs 是指原生的 canvas/svg 属性配置，参考 https://g.antv.antgroup.com/api/css/inheritance 这个文档最下面的表格。

(item: any, index: number, items: any[]) => ({ fill: 'red' });

我还是不明白。{ fill: 'red' }结果不都成了红色吗？我的目的跟原作者的有些不同，不是基于axis的label，而是Mark的label，想要各个label和连线都是各自Mark的颜色。比如一张图里有一个蓝色interval，一个红色interval，一个绿色interval，要求蓝色interval配蓝色label和connector，绿色的配绿色的，红色的配红色的。用代码怎样表达“各自Mark的颜色”呢？

而且，我在label里尝试了下，

            chart
            .interval()
            .label({
                position: 'spider',
                offset: 40,
                text: 'name',
                connector: true,
                style: (item, index, items) => ({ fill: 'red' })
            })

添加style: (item, index, items) => ({ fill: 'red' })后，没看到图表哪里变红啊。多谢你的耐心！

我还是不明白。{ fill: 'red' }结果不都成了红色吗？我的目的跟原作者的有些不同，不是基于axis的label，而是Mark的label，想要各个label和连线都是各自Mark的颜色。比如一张图里有一个蓝色interval，一个红色interval，一个绿色interval，要求蓝色interval配蓝色label和connector，绿色的配绿色的，红色的配红色的。用代码怎样表达“各自Mark的颜色”呢？

而且，我在label里尝试了下，

            chart
            .interval()
            .label({
                position: 'spider',
                offset: 40,
                text: 'name',
                connector: true,
                style: (item, index, items) => ({ fill: 'red' })
            })

添加style: (item, index, items) => ({ fill: 'red' })后，没看到图表哪里变红啊。多谢你的耐心！

请问你找到label对应mark的方法了吗？

没有！你要是找到了，告诉我一声

没有！你要是找到了，告诉我一声

使用的啥版本？

没有！你要是找到了，告诉我一声

使用的啥版本？

"@antv/g2": "^5.1.20"。我现在能够手动设定connectorStroke的颜色，比如都设定为“#222”，但是仍然不知道怎样让它变成各自mark的颜色

() => '#222'

使用回调即可。

嗯，我说的是我“能够”设定为#222。但是我不能够设定为各自mark的颜色，应该怎么设定？

比如以下例子，手动设定connectorStroke的颜色，均成为灰色没问题。但是各个rect本身的颜色是由数据的“event”决定的，connectorStroke怎样才能和rect的颜色相符？同样，label的文本（text）怎样才能和rect的颜色相符？

userView
.rect()
    .transform([{ type: 'stackY' }])
    .encode('x', 'range')
    .encode('y', 'durationRange')
    .encode('color', 'event')
    .label({
        position: 'outside',
        offset: 40,
        text: data => formatLongText(data.event),
        fill: isDarkMode ? '#ddd' : '#222',
        connector: true,
        connectorStroke: isDarkMode ? '#ccc' : '#222',
        fontSize: 16,
        transform: [
            {
                type: 'overlapDodgeY',
            },
        ],
    })