Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Chart – Placer les labels d'un PieChart avec labelPosition

Le composant PieChart Flex supporte des labels qui affiche des informations sur chaque point de data (chaque tranche). Tous le composants Charting de Flex supportent les objets DataTip (tooltip au survol). Les Data Labels en revanche, ne sont supportés que par les objets PieSeries, ColumnSeries et BarSeries. Les DataLabels sont différents des DataTip car ils sont toujours visibles et ne réagissent pas aux mouvements de la souris.

Pour ajouter des data labels (étiquettes de donnée, pour la VF) à un composant PieChart, fixez la propriété labelPosition sur la Serie en question. Pour supprimer les data labels d'un PieChart, fixez cette propriété à "none" (valeur par défaut).

Voici les valeurs valides pour la propriété labelPosition d'un PieChart (la classe PieSeries supporte + de valeurs pour cette propriété que BarSeries et ColumnSeries):

• callout: Dessine les labels de part et d'autre du PieChart. Réduit l'espace prit par le PieChart si nécessaire. Dessine des lignes entre les labels et chaque part (wedge). Réduit les labels si nécessaire. Cette propriété peut seulement être utilisée sur un objet PieSeries.
• inside: Dessine les labels à l'intérieur du chart. Réduit la taille des labels pour être sur qu'il ne se chevauchent pas. N'importe quel label qui doit être dessiné avec une taille trop petite (définie par la propriété insideLabelSizeLimit), sera masqué.
• insideWithCallout: Comme "inside" sauf que si Flex n'a pas la place de le dessiner, il le convertit en un "callout". Cette propriété est pratique si vous laissez l'utilisateur redimensionner le chart. Cette propriété peut seulement être utilisée sur un objet PieSeries.
• none: Aucun label (valeur par défaut)
• outside: Dessine les labels en dehors du composant PieChart.

Voici les propriétés des objets PieSeries que vous pouvez utiliser pour modifier l'apparence des labels:

• calloutGap: Définit la quantité d'espace, en pixels, à insérer entre le bord du PieChart et le label quand il est rendu en "callout". Valeur par défaut: 10 pixels
• calloutStroke: Définit le style utilisé pour dessiner les lignes des callout
• insideLabelSizeLimit: Définit la taille du seuil, en nombre de points, sous lequel Flex peut afficher des labels à l'intérieur du Chart. Au dessus de cette valeur, les data labels sont soit supprimés, soit transformé en callout suivant la valeur de labelPosition.

Voici un exemple qui montre les différentes valeurs de labelPosition pour un PieChart Flex:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            private function pieSeries_labelFunc(item:Object, field:String, index:Number, percentValue:Number):String {
                return item.@label + ": " + item.@data + " (" + percentValue.toFixed(2) + "%)";
            }
        ]]>
    </mx:Script>

    <mx:XML id="dp">
        <products>
            <product label="Product 1" data="3" />
            <product label="Product 2" data="1" />
            <product label="Product 3" data="4" />
            <product label="Product 4" data="1" />
            <product label="Product 5" data="5" />
            <product label="Product 6" data="9" />
        </products>
    </mx:XML>

    <mx:Array id="labelPositionArr">
        <mx:Object label="callout" />
        <mx:Object label="inside" />
        <mx:Object label="insideWithCallout" />
        <mx:Object label="none" />
        <mx:Object label="outside" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="labelPosition:" />
        <mx:ComboBox id="comboBox"
                dataProvider="{labelPositionArr}" />
    </mx:ApplicationControlBar>

    <mx:PieChart id="pieChart"
            dataProvider="{dp.product}"
            height="250"
            width="100%">
        <mx:series>
            <mx:PieSeries id="pieSeries"
                    field="@data"
                    labelPosition="{comboBox.selectedItem.label}"
                    labelFunction="pieSeries_labelFunc" />
        </mx:series>
    </mx:PieChart>

</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application