Cookie Consent by Free Privacy Policy Generator 📌 VChart, How to perform event tracking based on Tooltip behavior


✅ VChart, How to perform event tracking based on Tooltip behavior


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

Title

How to perform event tracking based on Tooltip behavior in VChart

Description

When users view the chart, they need to know when the tooltip viewing operation was performed on the chart, and the behavior event tracking of the chart needs to be reported.

Solution

Different chart libraries have different solutions. VChart provides Tooltip-related events, involving various stages such as triggering tooltips, updating tooltips, and destroying tooltips. You can use dimensionHover, tooltipShow, and tooltipHide events to obtain the required information.

Code Example

const spec = {
  type: 'bar',
  data: [
    {
      id: 'barData',
      values: [
        { type: 'Autocracies', year: '1930', value: 129 },
        { type: 'Autocracies', year: '1940', value: 133 },
        { type: 'Autocracies', year: '1950', value: 130 },
        { type: 'Autocracies', year: '1960', value: 126 },
        { type: 'Autocracies', year: '1970', value: 117 },
        { type: 'Autocracies', year: '1980', value: 114 },
        { type: 'Autocracies', year: '1990', value: 111 },
        { type: 'Autocracies', year: '2000', value: 89 },
        { type: 'Autocracies', year: '2010', value: 80 },
        { type: 'Autocracies', year: '2018', value: 80 },
        { type: 'Democracies', year: '1930', value: 22 },
        { type: 'Democracies', year: '1940', value: 13 },
        { type: 'Democracies', year: '1950', value: 25 },
        { type: 'Democracies', year: '1960', value: 29 },
        { type: 'Democracies', year: '1970', value: 38 },
        { type: 'Democracies', year: '1980', value: 41 },
        { type: 'Democracies', year: '1990', value: 57 },
        { type: 'Democracies', year: '2000', value: 87 },
        { type: 'Democracies', year: '2010', value: 98 },
        { type: 'Democracies', year: '2018', value: 99 }
      ]
    }
  ],
  xField: ['year', 'type'],
  yField: 'value',
  seriesField: 'type',
  legends: {
    visible: true,
    orient: 'top',
    position: 'start'
  }
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

vchart.on('dimensionHover', (params)=>{
  if(params.action === 'enter'){
    console.log('Triggered when enter Dimension', )
  } else if(params.action ==='move'){
    console.log('Triggered when move Dimension', )
  } else if(params.action ==='leave'){
    console.log('Triggered when leave Dimension', )
  }
})

vchart.on('tooltipShow', (params) => {
  console.log('Triggered every rendering')
  if(params.changePositionOnly === true){
    console.log('Triggered position change only')
  } else {
    console.log('Triggered target mark change')
  }
})

vchart.on('tooltipHide', (params) => {
  console.log('Triggered every hide')
})

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

Result

A simple online demo: https://codesandbox.io/p/sandbox/vchart-tooltip-event-gmcgqf?file=%2Fsrc%2Findex.js%3A49%2C1

Related Documentation

Tooltip tutorial: https://visactor.io/vchart/guide/tutorial\_docs/Chart\_Concepts/Tooltip
Github: https://github.com/VisActor/VChart

...

✅ VChart, How to perform event tracking based on Tooltip behavior


📈 85.66 Punkte

✅ How to use the tooltip and abscissa in the vchart library?


📈 40.18 Punkte

✅ How to add custom content at the bottom of the tooltip card in VChart?


📈 40.18 Punkte

✅ Zurb Foundation up to 5.5.3 Tooltip Plugin foundation.tooltip.js title cross site scripting


📈 38.66 Punkte

✅ Vuln: Zurb Foundation tooltip Plugin 'foundation.tooltip.js' Cross Site Scripting Vulnerability


📈 38.66 Punkte

✅ Zurb Foundation bis 5.5.3 Tooltip Plugin foundation.tooltip.js title Cross Site Scripting


📈 38.66 Punkte

✅ Vuln: Zurb Foundation tooltip Plugin 'foundation.tooltip.js' Cross Site Scripting Vulnerability


📈 38.66 Punkte

✅ Zurb Foundation bis 5.5.3 Tooltip Plugin foundation.tooltip.js title Cross Site Scripting


📈 38.66 Punkte

✅ CVE-2023-28606 | MISP prior 2.4.169 Event-Graph Node Tooltip js/event-graph.js cross site scripting


📈 31.69 Punkte

✅ How to bind the click event of the pie chart label in @visactor/vchart?


📈 27.03 Punkte

✅ How to clear the box selection at the end of the onbrushEnd event when using vchart?


📈 27.03 Punkte

✅ In-Home Dog Training & Behavior Modification: Transforming Canine Behavior in the Comfort of Home


📈 25.63 Punkte

✅ CVE-2022-34172 | Jenkins up to 2.355 Symbol-based Icons tooltip cross site scripting


📈 24.08 Punkte

✅ Vectra Unifies AI-Driven Behavior-Based Detection and Signature-Based Detection


📈 22.31 Punkte

✅ Securus lets cops perform real-time cellphone tracking of US Mobile Users


📈 21.73 Punkte

✅ What are the methods for data sampling in VChart charts?


📈 20.85 Punkte

✅ How to configure vchart line chart to make the points sparse in the case of big data?


📈 20.85 Punkte

✅ How to customize radar chart axis labels to richtext in VChart?


📈 20.85 Punkte

✅ How to configure the Y-axis with both title and unit in the VChart line chart?


📈 20.85 Punkte

✅ How to set VChart axis gridlines as dashed lines?


📈 20.85 Punkte

✅ How to achieve the linkage effect in the vchart library?


📈 20.85 Punkte

✅ What are the methods for formatting VChart chart labels?


📈 20.85 Punkte

✅ How to adjust spacing between axis labels in vchart?


📈 20.85 Punkte

✅ How to configure pie chart size in VChart?


📈 20.85 Punkte

✅ How to make the axis label with graphics in VChart?


📈 20.85 Punkte

✅ Abnormal Y-axis display in the area chart of vchart library, where lower values appear higher


📈 20.85 Punkte

✅ How does react-vchart achieve on-demand loading?


📈 20.85 Punkte

✅ How to configure the style of pager arrow in VChart legend?


📈 20.85 Punkte

✅ How to configure animations in VChart portfolio diagrams?


📈 20.85 Punkte

✅ How to sort data by specified fields in @visactor/vchart?


📈 20.85 Punkte

✅ How to configure gradual change colors for discrete data in VChart?


📈 20.85 Punkte

✅ Can we limit the default rendered lines in a vchart multi-line chart?


📈 20.85 Punkte

✅ How to achieve only selecting the current item in VChart when clicking on the legend?


📈 20.85 Punkte

✅ How to format axis labels in @visactor/vchart?


📈 20.85 Punkte











matomo

Datei nicht gefunden!