G 2カスタムTooltip
12463 ワード
G 2カスタムTooltip
<div id="interfaceChart" class="interface-chart-main">div>
import G2 from '@antv/g2'
import DataSet from '@antv/data-set'
let chart = new G2.Chart({
container: 'interfaceChart',
forceFit: true,
height: 300
})
let data = [{
methodName: 'getUserInfo',
callCount: 38,
failRate: 0,
overTimeCount: 0
}, {
methodName: 'getSystemInfo',
callCount: 52,
failRate: 0,
overTimeCount: 0
}, {
methodName: 'getTime',
callCount: 61,
failRate: 0,
overTimeCount: 0
}]
const dataSet = new DataSet()
const dv = dataSet.createView().source(data)
dv.transform({
type: 'fold',
fields: ['callCount'], //
key: 'key', // key
value: 'value' // value
})
chart.source(dv, {
methodName: {
type: 'cat'
}
})
chart.tooltip({
crosshairs: 'y',
htmlContent: function htmlContent(title, items) {
let selfItem = items[0]
let html = ''
let titleDom = `${title}`
let sumDom = `
:${selfItem.value}
:${selfItem.failRate}%
:${selfItem.overTimeCount}
`
return html + titleDom + sumDom + ''
}
})
chart.scale('value', {
alias: ' '
})
chart.axis('value', {
label: {
offset: [-10, 10]
},
title: {
textStyle: {
fontSize: 12, //
}
},
})
chart.interval().tooltip('methodName*value*failRate*overTimeCount', (methodName, value, failRate, overTimeCount) => {
return {
methodName,
value,
failRate,
overTimeCount
}
}).position('methodName*value').size(20)
chart.render()