feat: chart label & tooltip

This commit is contained in:
ulleo
2025-06-17 15:38:58 +08:00
parent 6c3c612ada
commit fa3f57e1b7
4 changed files with 44 additions and 8 deletions
@@ -34,6 +34,18 @@ export class Bar extends BaseG2Chart {
nice: true,
})
.interaction('elementHighlight', { background: true })
.tooltip((data) => {
if (series.length > 0) {
return { name: data[series[0].value], value: data[y[0].value] }
} else {
return { name: y[0].name, value: data[y[0].value] }
}
})
.label({
text: y[0].value,
position: 'inside',
transform: [{ type: 'overlapDodgeY' }],
})
if (series.length > 0) {
this.chart?.encode('color', series[0].value).transform({ type: 'stackY' })
@@ -33,6 +33,18 @@ export class Column extends BaseG2Chart {
nice: true,
})
.interaction('elementHighlight', { background: true })
.tooltip((data) => {
if (series.length > 0) {
return { name: data[series[0].value], value: data[y[0].value] }
} else {
return { name: y[0].name, value: data[y[0].value] }
}
})
.label({
text: y[0].value,
position: 'inside',
transform: [{ type: 'overlapDodgeY' }],
})
if (series.length > 0) {
this.chart?.encode('color', series[0].value).transform({ type: 'stackY' })
@@ -36,14 +36,23 @@ export class Line extends BaseG2Chart {
this.chart?.encode('color', series[0].value)
}
this.chart?.line().label({
text: y[0].value,
style: {
dx: -10,
dy: -12,
},
transform: [{ type: 'overlapDodgeY' }, { type: 'exceedAdjust' }, { type: 'overlapHide' }],
})
this.chart
?.line()
.label({
text: y[0].value,
style: {
dx: -10,
dy: -12,
},
transform: [{ type: 'overlapDodgeY' }, { type: 'exceedAdjust' }, { type: 'overlapHide' }],
})
.tooltip((data) => {
if (series.length > 0) {
return { name: data[series[0].value], value: data[y[0].value] }
} else {
return { name: y[0].name, value: data[y[0].value] }
}
})
this.chart?.point().style('fill', 'white').tooltip(false)
}
@@ -24,5 +24,8 @@ export class Pie extends BaseG2Chart {
.encode('y', y[0].value)
.encode('color', series[0].value)
.legend('color', { position: 'bottom', layout: { justifyContent: 'center' } })
.tooltip((data) => {
return { name: y[0].name, value: data[y[0].value] }
})
}
}