範囲セレクタ

FinancialChart の RangeSelector を使用すると、ユーザーが特定の範囲のデータを選択してチャートに表示できます。さまざまなタイプの株価チャートに簡単に RangeSelector を連結できます。これは主に金融業界で、さまざまなデータ範囲に対して株価の分析を実行するために使用されています。

RangeSelector には左スクロールボックス（最小値用）と右スクロールボックス（最大値用）があり、チャートの特定の時間をスクロールできます。ユーザーは RangeSelector の最小値と最大値を変更し、これらのスクロールボックスを左側や右側にドラッグして、チャート内でのデータの表示範囲を調整できます。範囲バーでスクロールボックスを左にドラッグすると値が減少し、右にドラッグする範囲バーの値が増加します。

コードに最小および最大範囲を設定するには、RangeSelectorのMinおよびMaxプロパティを使用します。

次のコードスニペットは、アプリケーションで RangeSelector を使用する方法を具体的に示します。

DataService.cs

public class DataService
{
    List<Company> _companies = new List<Company>();
    Dictionary<string, List<Quote>> _cache = new Dictionary<string, List<Quote>>();

    private DataService()
    {
        _companies.Add(new Company() { Symbol = "box", Name = "Box Inc" });
        _companies.Add(new Company() { Symbol = "fb", Name = "Facebook" });
    }

    public List<Company> GetCompanies()
    {
        return _companies;
    }

    public List<Quote> GetSymbolData(string symbol)
    {
        if (!_cache.Keys.Contains(symbol))
        {
            string path = string.Format("FinancialChartExplorer.Resources.{0}.json", symbol);
            Assembly asm = this.GetType().GetTypeInfo().Assembly;
            var stream = asm.GetManifestResourceStream(path);
            var ser = new DataContractJsonSerializer(typeof(Quote[]));
            var data = (Quote[])ser.ReadObject(stream);
            var dataList = data.ToList();
            if (IsWindowsPhoneDevice())
            {
                dataList = dataList.Take(20).ToList();
            }
            _cache.Add(symbol, dataList);
        }

        return _cache[symbol];
    }

    bool IsWindowsPhoneDevice()
    {
        if (Windows.Foundation.Metadata.ApiInformation.
            IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"))
        {
            return true;
        }
        return false;
    }

    static DataService _ds;
    public static DataService GetService()
    {
        if (_ds == null)
            _ds = new DataService();
        return _ds;
    }
}

public class Quote
{
    public string date { get; set; }
    public double high { get; set; }
    public double low { get; set; }
    public double open { get; set; }
    public double close { get; set; }
    public double volume { get; set; }
}

public class Company
{
    public string Symbol { get; set; }
    public string Name { get; set; }
}

XAML
Code

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition x:Name="row" Height="100" />
    </Grid.RowDefinitions>
    <Chart:C1FinancialChart x:Name="candlestickChart" BindingX="date" 
    Binding="high,low,open,close,volume" ChartType="Candlestick" 
    ItemsSource="{Binding Data}">
        <Chart:FinancialSeries />
    </Chart:C1FinancialChart>
    <Chart:C1FinancialChart x:Name="financialChart" BindingX="date" 
    Binding="close" ChartType="Line" ToolTip="{x:Null}" Grid.Row="1" 
    ItemsSource="{Binding Data}">
        <Chart:FinancialSeries />
    </Chart:C1FinancialChart>
    <Extension:RangeSelector x:Name="rangeSelector" Grid.Row="1" 
    ParentChart="{Binding ElementName=financialChart}" ValueChanged="OnRangeSelectorValueChanged" 
    Margin="20 10 0 10" />
</Grid>

Visual Basic	コードのコピー
Partial Public Class RangeSelector Inherits Page Private dataService As DataService = dataService.GetService() Public Sub New() InitializeComponent() End Sub Public ReadOnly Property Data() As List(Of Quote) Get Return dataService.GetSymbolData("fb") End Get End Property Sub OnRangeSelectorValueChanged(sender As Object, e As EventArgs) candlestickChart.AxisX.Min = rangeSelector.LowerValue candlestickChart.AxisX.Max = rangeSelector.UpperValue End Sub End Class

Visual Basic

コードのコピー

Partial Public Class RangeSelector
    Inherits Page
    Private dataService As DataService = dataService.GetService()

    Public Sub New()
        InitializeComponent()
    End Sub

    Public ReadOnly Property Data() As List(Of Quote)
        Get
            Return dataService.GetSymbolData("fb")
        End Get
    End Property

    Sub OnRangeSelectorValueChanged(sender As Object, e As EventArgs)
        candlestickChart.AxisX.Min = rangeSelector.LowerValue
        candlestickChart.AxisX.Max = rangeSelector.UpperValue
    End Sub
End Class

C#	コードのコピー
public partial class RangeSelector : Page { DataService dataService = DataService.GetService(); public RangeSelector() { InitializeComponent(); } public List<Quote> Data { get { return dataService.GetSymbolData("fb"); } } void OnRangeSelectorValueChanged(object sender, EventArgs e) { candlestickChart.AxisX.Min = rangeSelector.LowerValue; candlestickChart.AxisX.Max = rangeSelector.UpperValue; } }

コードのコピー

public partial class RangeSelector : Page
{
    DataService dataService = DataService.GetService();

    public RangeSelector()
    {
        InitializeComponent();
    }

    public List<Quote> Data
    {
        get
        {
            return dataService.GetSymbolData("fb");
        }
    }

    void OnRangeSelectorValueChanged(object sender, EventArgs e)
    {
        candlestickChart.AxisX.Min = rangeSelector.LowerValue;
        candlestickChart.AxisX.Max = rangeSelector.UpperValue;
    }
}