範囲セレクタ

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

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

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

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);
            var stream = Assembly.GetExecutingAssembly().GetManifestResourceStream(path);
            var ser = new DataContractJsonSerializer(typeof(Quote[]));
            var data = (Quote[])ser.ReadObject(stream);
            _cache.Add(symbol, data.ToList());
        }

        return _cache[symbol];
    }

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

XAML
Code

<c1:C1FinancialChart BindingX="date" 
                     Binding="high,low,open,close,volume" 
                     ChartType="Candlestick" 
                     ItemsSource="{Binding Data}">
    <c1:FinancialSeries />
    <c1:C1FinancialChart.AxisX>
        <c1:Axis Min="{Binding Source={x:Reference Name=rangeSelector}, 
            Path=LowerValue}" 
                 Max="{Binding Source={x:Reference Name=rangeSelector}, 
            Path=UpperValue}" />
    </c1:C1FinancialChart.AxisX>
</c1:C1FinancialChart>

C#	コードのコピー
public partial class RangeSelector : UserControl { DataService dataService = DataService.GetService(); public RangeSelector() { InitializeComponent(); } public List<Quote> Data { get { return dataService.GetSymbolData("fb"); } } }

コードのコピー

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

    public RangeSelector()
    {
        InitializeComponent();
    }

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