hoverItems(items: Object, timelineStep: Number);
items. JSON object whose fields correspond to ID of the tree map items to select.
timelineStep. Index of time line step.
The hoverItems method sets hover over a tree map item.
To execute this example, the page must contain the TreeMap component named treeMap (see Example of Creating the TreeMap Component). Apply yellow fill to the tree map item named Southern Europe, set and process hover, and show item tooltip with the border that has color different from the item color:
// Process the ItemsHovered event treeMap.ItemsHovered.add(function (sender, args) { if (args.Items != null) { for (var i in args.Items) { // Get tree map item var treeMapItem = treeMap.getModel().getItem(i); // Show tooltip for this item treeMapItem.showTooltip(); }; } }); // Color of tooltip border must differ from the item color var treeMapExt = new PP.Ui.TreeMap({ UseItemColorForToolTipBorder: false }); PP.overrideObject(treeMap, treeMapExt, "_UseItemColorForToolTipBorder"); // Get the tree map item named Southern Europe var treeMapItem = treeMap.getModel().getItem("SEU"); // Imitate hover over this item items = {}; items[treeMapItem.getId()] = true; treeMap.hoverItems(items, 0); // Fire item hover event treeMap.fireItemsHovered(treeMapItem.getId()); // Determine color of this item var targetColor = new PP.SolidColorBrush({ Color: "#ffd900" }); // Disable auto color for this item treeMap.setLabelAutoColor(false); // Set color of item fill treeMapItem.setTargetColor(targetColor, 0.8); // Play animation treeMapItem.animationStep(1); // Refresh the tree map item treeMapItem.update();
After the example execution the tree map item named Southern Europe is filled with yellow color, and a tooltip with the border color of which differs from the item color, is shown for this item: