G 2カスタムTooltip


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()