antvis/G2








The issue has been closed
V5版本 图例样式 在增加shape 属性后失效 #5085
YangShuqing posted onGitHub
版本:5.0.8 示例
/**
* A recreation of this demo: https://observablehq.com/@d3/variable-color-line
*/
import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
theme: 'classic',
autoFit: true,
});
chart
.line()
.data({
type: 'fetch',
value: 'https://assets.antv.antgroup.com/g2/temperatures1.json',
})
.scale('y', { nice: true })
.scale('color', {
domain: ['CLR', 'FEW', 'SCT', 'BKN', 'OVC', 'VV '],
range: [
'deepskyblue',
'lightskyblue',
'lightblue',
'#aaaaaa',
'#666666',
'#666666',
],
})
.encode('x', (d) => new Date(d.date))
.encode('y', 'value')
//.encode('shape', 'smooth') // 圆角 增加该项后 legend 所有设置 失效
.legend({
color: {
itemMarkerSize: 40,
// 只有写在这里才生效 issue 5082
itemLabelFontSize: 30,
itemLabelFill: 'red',
style:{
//style 中的设置未生效
itemLabelFontSize: 50,
itemLabelFill: '#fff',
}
},
})
.encode('color', 'condition')
.encode('series', () => 'a')
.style('gradient', 'x')
.style('lineWidth', 2)
.axis('x', { title: 'date' });
chart.render();