如何在Adobe Flash Builder中使用滑块控制柱形图？

问题描述

| 我已经在Adobe Flash Builder中创建了Columnchart。 现在，我想用Slider控制该柱形图。 我想根据滑块的值更改柱形图。 我该如何实现？ 任何建议都是有帮助的。 提前致谢 ！     

解决方法

您需要将更改事件的侦听器添加到滑块组件。 然后，更新图表的数据提供程序，然后将其重新分配给图表。 这是Tour de Flex的经过修改的示例。

<?xml version=\"1.0\" encoding=\"utf-8\"?>
<mx:Application xmlns:mx=\"http://www.adobe.com/2006/mxml\" layout=\"vertical\" verticalAlign=\"top\"
    horizontalAlign=\"center\" backgroundGradientColors=\"[0x000000,0x323232]\" paddingTop=\"0\" viewSourceURL=\"srcview/index.html\">

    <mx:Script>
        <![CDATA[

        import mx.collections.ArrayCollection;

        [Bindable]
        private var medalsAC:ArrayCollection = new ArrayCollection( [
            { Country: \"USA\",Gold: 35,Silver:39,Bronze: 29 },{ Country: \"China\",Gold: 32,Silver:17,Bronze: 14 },{ Country: \"Russia\",Gold: 27,Silver:27,Bronze: 38 } ]);
        //slider change handler
        private function columnSliderChanged(event:Event):void{
            trace(columnSlider.value);//print slider
            medalsAC.getItemAt(1).Gold = columnSlider.value * 10;//assign slider value to Gold for China (item index 1)
            column.dataProvider = medalsAC;//re-assign data provider
        }
        ]]>
    </mx:Script>

    <mx:Panel title=\"ColumnChart Control\" layout=\"horizontal\" color=\"0xffffff\" borderAlpha=\"0.15\" width=\"600\" height=\"240\"
         paddingTop=\"10\" paddingRight=\"5\" paddingBottom=\"10\" paddingLeft=\"5\" horizontalAlign=\"center\">

         <mx:ColumnChart id=\"column\" height=\"100%\" color=\"0x323232\"
            showDataTips=\"true\" dataProvider=\"{medalsAC}\">

            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField=\"Country\"/>
            </mx:horizontalAxis>

            <mx:series>
                <mx:ColumnSeries xField=\"Country\" yField=\"Gold\" displayName=\"Gold\"/>
                <mx:ColumnSeries xField=\"Country\" yField=\"Silver\" displayName=\"Silver\"/>
                <mx:ColumnSeries xField=\"Country\" yField=\"Bronze\" displayName=\"Bronze\"/>
            </mx:series>
        </mx:ColumnChart>

        <mx:Legend dataProvider=\"{column}\" color=\"0x323232\"/>

    </mx:Panel>
    <!-- added a slider here,updates on dragging and has a change event handler -->
    <mx:HSlider id=\"columnSlider\" liveDragging=\"true\" change=\"columnSliderChanged(event);\"/>
</mx:Application>