This is a demo tutorial. While there is no step-by-step commentary available (yet), the live demo below is fully functional. Feel free to open it for full source code.
This demo shows how we can toggle "active" state of a bullet by clicking on it.
It works by creating an "active"
state for the bullet's circle. This state is triggered on clicked objects if they have their toggleKey: "active"
set.
circle.states.create("active", { radius: 10 });
circle.states.create("active", { radius: 10 });
It also uses an event to monitor changes for bullet circle's active
setting, to reset it on a previously "activated" bullet.
circle.on("active", function(active, target) { if (currentActiveBullet) { currentActiveBullet.set("active", false); } if (active) { currentActiveBullet = target; } else { currentActiveBullet = undefined; } });
circle.on("active", function(active, target) { if (currentActiveBullet) { currentActiveBullet.set("active", false); } if (active) { currentActiveBullet = target; } else { currentActiveBullet = undefined; } });
See the Pen
Toggle active bullet by amCharts team (@amcharts)
on CodePen.0