How to monitor events in data dimensions and obtain corresponding data?

How to monitor events in data dimensions and obtain corresponding data?

Hello, we have a requirement here to monitor the location of the bar chart data dimension and highlight the cells in another table based on the data corresponding to the user’s click. How should this be achieved?

Users can listen to the dimensionClick event on the vchart instance to customize the operation performed after clicking on a data dimension. At the same time, the information of the corresponding data dimension can be obtained in the callback function parameters:

vchart.on('dimensionClick', (args) => { const datum = args.datum; console.log('Dimension Click!', args, datum);
});
Enter fullscreen mode
Exit fullscreen mode
const spec = { type: 'bar', data: [ { id: 'barData', values: [ { month: 'Monday', sales: 22 }, { month: 'Tuesday', sales: 13 }, { month: 'Wednesday', sales: 25 }, { month: 'Thursday', sales: 29 }, { month: 'Friday', sales: 38 } ] } ], xField: 'month', yField: 'sales'
}; const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync(); vchart.on('dimensionClick', (args) => { const datum = args.datum; console.log('Dimension Click!', args, datum);
}); // Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
Enter fullscreen mode
Exit fullscreen mode

Image description


Discover more from Coursity

Subscribe to get the latest posts sent to your email.

Leave a Comment

Your email address will not be published. Required fields are marked *

Discover more from Coursity

Subscribe now to keep reading and get access to the full archive.

Continue reading

Scroll to Top
Unlimited web space.