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>

Flex中的时间轴

1 个答案: