Flex 中的时间线

Question

尝试在 Flex 中构建时间线，当我滑动滑块时有一个水平滑块，折线图上应该有一条线作为针相对于滑块的值移动，我尝试使用网格线来实现这一点，但网格线在 x 轴的所有值上都可见，但我只想显示与滑块值相关的单个网格线。有没有办法隐藏几条网格线并显示特定的网格线。

Answer 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>