0

Flex でタイムラインを構築しようとしています。スライダーをスライドすると水平スライダーがあり、スライダーの値に対して移動する針として折れ線グラフに線が表示されます。これを達成するためにグリッド線を使用しようとしましたが、グリッド線が全体に表示されますx軸のすべての値ですが、スライダーの値に関して単一のグリッド線のみを表示したいです。いくつかのグリッド線を非表示にして特定のグリッド線を表示する方法はありますか?

4

1 に答える 1

1

これが私が約30分で作成したものです。これは非常に初歩的なものであり、解決するために残しておく問題がいくつかあります（または、残りの問題に固有の新しい質問を投稿することもできます）。とにかくアプリケーションに合わせてこれを変更する必要がある可能性が高いので、残りの問題については気にしませんでした。

Dateチャートの横軸にオブジェクトを使用していると仮定しました。そのため、日付オブジェクトを対応する数値（エポック時間）に変換する必要があります。これにより、数値を期待するスライダーコンポーネントを操作できます。

さらに質問がある場合は、他の人が実行できるように、使用しているコード（またはその単純なバージョン）を投稿することをお勧めします。そうすれば、あなたが得る答えはあなたのケースに固有のものであり、このような一般的なものではありません:)

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               creationComplete="onCreationComplete()">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            import spark.primitives.Line;

            [Bindable] private var chartData : ArrayCollection =
                new ArrayCollection(
                    [
                        { sales: 101000, month: new Date( '01/01/2013' ) },
                        { sales: 350000, month: new Date( '02/01/2013' ) },
                        { sales: 475000, month: new Date( '03/01/2013' ) },
                        { sales: 425000, month: new Date( '04/01/2013' ) }
                    ] );

            private var line:Line;

            private function onCreationComplete():void
            {
                line = new Line();
                line.height = chart.height;
                line.stroke = new SolidColorStroke(0x0000FF, 2);
                chartContainer.addElement(line);            }

            private function getDateInEpochTime(date:Date):Number
            {
                return date.time;
            }

            private function dataTipFormatFunction(value:Number):Object
            {
                return new Date(value).toString();
            }

            private function onSliderChange():void
            {
                line.x = convertSliderValueToXCoordinate();
            }

        private function convertSliderValueToXCoordinate():Number
        {
            var min:Number = slider.minimum;
            var max:Number = slider.maximum;
            var adjustedValue:Number = slider.value - min;
            var range:Number = max - min;
            var percentOfRange:Number = adjustedValue/range
            var xCoordinate:Number = slider.width * percentOfRange;
            var thumbWidth:Number = slider.thumb.width;
            if (percentOfRange > .5)
                xCoordinate = xCoordinate - (thumbWidth * (percentOfRange - .5));
            else if (percentOfRange < .5)
                xCoordinate = xCoordinate + (thumbWidth * (.5 - percentOfRange));
            return xCoordinate;
        }

        ]]>
    </fx:Script>

    <s:Group id="chartContainer" width="800" height="600">
        <mx:LineChart id="chart" dataProvider="{chartData}" left="0" right="0" top="0" bottom="20">
            <mx:horizontalAxis>
                <mx:DateTimeAxis id="hAxis" dataUnits="months" alignLabelsToUnits="true" displayLocalTime="true"/>
            </mx:horizontalAxis>
            <mx:series>
                <mx:LineSeries displayName="Sales by Month" yField="sales" xField="month">
                    <mx:lineStroke>
                        <s:SolidColorStroke color="0xFF0000" />
                    </mx:lineStroke> 
                </mx:LineSeries> 
            </mx:series>
        </mx:LineChart>
        <s:HSlider id="slider" left="0" right="0" bottom="0"
                   dataTipFormatFunction="dataTipFormatFunction"
                   minimum="{getDateInEpochTime(chartData.getItemAt(0).month)}"
                   maximum="{getDateInEpochTime(chartData.getItemAt( chartData.length -1 ).month)}"
                   change="onSliderChange()"/>
    </s:Group>
</s:Application>
于 2013-01-31T19:48:04.673 に答える