ChartNavigator for ASP.NET Web Forms

ChartNavigator for ASP.NET Web Forms 2018.04.25 更新 グレープシティ株式会社

目次 製品の概要 2 ComponentOne for ASP.NET Web Formsのヘルプ 2 クイックスタート 3-8 主な要素 9 設計時サポート 10-11 機能 12 サポートされるチャートタイプ 12 サイズ 12-13 範囲 13 ツールチップ 13-14 ユーザーシナリオ 15 株価比較 15-21 1 Copyright GrapeCity, Inc. All rights reserved.

製品の概要 ChartNavigator for ASP.Net Web Forms を使用すると 大量のデータから一部の範囲を選択してデータをビジュアルに表示できます ChartNavigator は さまざまなタイプのチャートと簡単に連結でき スクロールやズームなどの強力な機能を提供します C1ChartNavigator では 次のチャートタイプのデータ連結がサポートされています C1BarChart C1LineChart C1CandlestickChart チャートナビゲータツールは 財務ダッシュボードデータや株価の変動などをビジュアルに表示するために広く使用されています これは チャート上で単一の値ではなく値の範囲を選択する場合に最も効果的なツールです 主要な機能 TargetSelector: ページ内のターゲットチャートを選択して連結します TargetSelector プロパティは jquery セレクタ文字列を指定します たとえば ID が "chart1" のチャートを C1ChartNavigator に連結するには TargetSelector の値を "#chart1" に設定します RangeMin: ナビゲータ範囲の開始値を設定します この値は チャートデータに設定されている X 軸の最小値から最大値の範囲内になければなりません RangeMax: ナビゲータ範囲の終了値を設定します この値は チャートデータに設定されている X 軸の最小値から最大値の範囲内になければなりません Step: サムボタンを移動する際の移動間隔の大きさを決定します デフォルトでは この値は 1 に設定されています ComponentOne for ASP.NET Web Forms のヘルプ ComponentOne for ASP.NET Web Forms の各コントロールで共通したトピック アセンブリの追加 テーマの適用 クライアント側情報などについては ASP.NET Web Forms ユーザーガイド を参照してください 2 Copyright GrapeCity, Inc. All rights reserved.

クイックスタート このトピックでは ASP.NET アプリケーションで C1ChartNavigator コントロールを使用および構成する方法について説明します 手順 1:Web フォームへのChartNavigator の追加 ASP.Net アプリケーションを作成し Web フォームに ChartNavigator コントロールを追加してチャートに連結するには 次の手順を実行します 1. Visual Studioで 新しいASP.Net Webアプリケーションを作成し 新しいWeb フォームを追加します 2. ツールボックスでC1ChartNavigatorコントロールを見つけ それをWebフォームに配置します ツールボックスにこのコントロールが見つからない場合は 右クリックし [ アイテムの選択 ] を選択します [ ツールボックスアイテムの選択 ] ダイアログボックスが表示されます コントロールを見つけたら [OK] をクリックします 手順 2: : チャートへのChartNavigator の連結 デザイナの場合 1. ツールボックスでC1CandlestickChartを見つけ それをWebフォームに配置します 2. CandlestickChartスマートタグをクリックし [C1CandlestickChartのタスク] メニューからSeriesListを選択します CandlestickChartSeries コレクションエディタが開きます 3. [ 追加 ] ボタンをクリックして チャートにデータ系列を追加します 右側ペインで Labelプロパティを探し データ系列に名前を付けます 4. 次に Dataプロパティを探します プロパティの横にあるドロップダウン矢印をクリックして Dataオプションを開きます Close High Low Open Xの5つのデータ表示オプションが表示されます 5. 各オプションの横にあるドロップダウン矢印をクリックして 必要な値を追加します CandleStickChart でデータを追加する方法については C1CandleStickChart クイックスタート を参照してください ソースビューの場合 次のマークアップを使用して CandlestickChart と ChartNavigator をアプリケーションに追加します ソースビュー <cc1:c1candlestickchart ID="C1CandlestickChart1" runat="server" Height="250" Width="500"> <Animation Enabled="false" /> <TextStyle FontFamily="Segoe UI" FontSize="13px"> </TextStyle> <Header Compass="North" Text="Stock Index from December 2014 to January 2015" TextStyle-FontSize="14px"></Header> // 凡例の表示を false に設定します <Legend Visible="false"></Legend> <Axis> <X Visible="true" TextVisible="false"> <GridMajor Visible="True"></GridMajor> </X> <Y Visible="false" Compass="West"> <GridMajor Visible="True"></GridMajor> <GridMinor Visible="False"></GridMinor> </Y> </Axis> //CandleStickChart 系列を追加します <CandlestickChartSeriesStyles> <cc1:candlestickchartstyle> <HighLow Width="2"> 3 Copyright GrapeCity, Inc. All rights reserved.

<Fill Color="#8C8C8C"></Fill> </HighLow> <FallingClose Width="6"> <Fill Color="#F07E6E"></Fill> </FallingClose> <RisingClose Width="6"> <Fill Color="#90CD97"></Fill> </RisingClose> </cc1:candlestickchartstyle> </CandlestickChartSeriesStyles> </cc1:c1candlestickchart> //ChartNavigator コントロールを追加します <cc1:c1chartnavigator ID="C1ChartNavigator1" runat="server" Width="500px" Height="50" ToolTip="Stock Index (Dec'14-Jan'15)" > <XAxis> <GridMajor Visible="False"></GridMajor> <GridMinor Visible="False"></GridMinor> </XAxis> <SeriesStyles> <cc1:chartstyle Fill-Color="#88bde6" Stroke="#88bde6"> <Fill Color="#88BDE6"></Fill> </cc1:chartstyle> </SeriesStyles> </cc1:c1chartnavigator> コードの場合 Page_Load イベントに次のコードを追加して ChartNavigator をローソク足チャートに連結します C# if (!IsPostBack) { PrepareOptions(); private void PrepareOptions() { //x- 軸に値を追加します copycode var valuesx = new List<DateTime?>(){ DateTime.Parse("2014-12-01"), DateTime.Parse("2014-12-02"), DateTime.Parse("2014-12-05"), DateTime.Parse("2014-12-06"), DateTime.Parse("2014-12-07"), DateTime.Parse("2014-12-08"), DateTime.Parse("2014-12-09"), DateTime.Parse("2014-12-12"), DateTime.Parse("2014-12-13"), DateTime.Parse("2014-12-14"), DateTime.Parse("2014-12-15"), DateTime.Parse("2014-12-16"), DateTime.Parse("2014-12-19"), DateTime.Parse("2014-12-20"), DateTime.Parse("2014-12-21"), DateTime.Parse("2014-12-22"), DateTime.Parse("2014-12-23"), 4 Copyright GrapeCity, Inc. All rights reserved.

DateTime.Parse("2014-12-26"), DateTime.Parse("2014-12-27"), DateTime.Parse("2014-12-28"), DateTime.Parse("2014-12-29"), DateTime.Parse("2014-12-30"), DateTime.Parse("2015-01-02"), DateTime.Parse("2015-01-03"), DateTime.Parse("2015-01-04"), DateTime.Parse("2015-01-05"), DateTime.Parse("2015-01-06"), DateTime.Parse("2015-01-09"), DateTime.Parse("2015-01-10"), DateTime.Parse("2015-01-11"), DateTime.Parse("2015-01-12"), DateTime.Parse("2015-01-13"), DateTime.Parse("2015-01-16"), DateTime.Parse("2015-01-17"), DateTime.Parse("2015-01-18"), DateTime.Parse("2015-01-19"), DateTime.Parse("2015-01-20"), DateTime.Parse("2015-01-23"), DateTime.Parse("2015-01-24"), DateTime.Parse("2015-01-25"), DateTime.Parse("2015-01-26"), DateTime.Parse("2015-01-27"), DateTime.Parse("2015-01-30"), DateTime.Parse("2015-01-31"); //y- 軸に値を追加します var valuesy = new List<double?>() { 10,12,11,14,16,20,18,17,17.5,20,22,21, 22.5,20,21,20.8,20,19,18,17,16,15,15,14,13,12, 11.5,10.9,10,9,9.5,10,12,11,14,16,20,18,17,17.5,20,22,21,22.5 ; // 高値を追加します var valueshigh = new List<double?>() { 10,12,11,14,16,20,18,17,17.5,20,22, 21,22.5,20,21,20.8,20,19,18,17,16,15,15,14,13,12, 11.5,10.9,10,9,9.5,10,12,11,14,16,20,18,17,17.5,20,22,21,22.5 ; // 安値を追加します var valueslow = new List<double?>() { 7.5,8.6,4.4,4.2,8,9,11,10,12.2,12,16, 15.5,16,15,16,16.5,16,16,15,14.5,14,13.5,13,12,11, 11,10,9,8,7.5,7.9,7.5,8.6,4.4,4.2,8,9,11,10,12.2,12,16,15.5,16 ; // 始値を追加します var valuesopen = new List<double?>() { 8,8.6,11,6.2,13.8,15,14,12,16,15,17,18, 17.2,18.5,17.8,18.6,19.8,18,16.9,15.6,14.7,14.2,13.9,13.2, 12.8,11.7,11.2,10.5,9.4,8.9,8.4,8,8.6,11,6.2,13.8,15,14,12,16,15,17,18,17.2 ; // 終値を追加します var valuesclose = new List<double?>() { 8.6,11,6.2,13.8,15,14,12,16,15,17,18,17.2, 18.5,17.8,18.6,19.8,18,16.9,15.6,14.7,14.2,13.9,13.2, 12.8,11.7,11.2,10.5,9.4,8.9,8.4,8,8.6,11,6.2,13.8,15,14,12,16,15,17,18,17.2,18.5 ; //CandlestickChart 系列を追加します var candleseries = new CandlestickChartSeries(); candleseries.data.x.addrange(valuesx.toarray<datetime?>()); candleseries.data.high.addrange(valueshigh.toarray<double?>()); candleseries.data.low.addrange(valueslow.toarray<double?>()); candleseries.data.open.addrange(valuesopen.toarray<double?>()); candleseries.data.close.addrange(valuesclose.toarray<double?>()); candleseries.label = "MSFT"; candleseries.legendentry = true; 5 Copyright GrapeCity, Inc. All rights reserved.

this.c1candlestickchart1.serieslist.add(candleseries); var lineseries = new LineChartSeries(); lineseries.data.x.addrange(valuesx.toarray<datetime?>()); lineseries.data.y.addrange(valuesy.toarray<double?>()); //ChartNavigator を系列データと連結します this.c1chartnavigator1.serieslist.add(lineseries); //ChartNavigator に対して TargetSelector を設定します this.c1chartnavigator1.targetselector = "#" + this.c1candlestickchart1.clientid; // #region Range this.c1chartnavigator1.rangemin = DateTime.Parse("2014-12-14").ToOADate(); this.c1chartnavigator1.rangemax = DateTime.Parse("2015-01-04").ToOADate(); VB If Not IsPostBack Then PrepareOptions() End If End Sub copycode Private Sub PrepareOptions() 'x- 軸に値を追加します Dim valuesx = New List(Of System.Nullable(Of DateTime))() From { DateTime.Parse("2014-12-01"), DateTime.Parse("2014-12-02"), DateTime.Parse("2014-12-05"), DateTime.Parse("2014-12-06"), DateTime.Parse("2014-12-07"), DateTime.Parse("2014-12-08"), DateTime.Parse("2014-12-09"), DateTime.Parse("2014-12-12"), DateTime.Parse("2014-12-13"), DateTime.Parse("2014-12-14"), DateTime.Parse("2014-12-15"), DateTime.Parse("2014-12-16"), DateTime.Parse("2014-12-19"), DateTime.Parse("2014-12-20"), DateTime.Parse("2014-12-21"), DateTime.Parse("2014-12-22"), DateTime.Parse("2014-12-23"), DateTime.Parse("2014-12-26"), DateTime.Parse("2014-12-27"), DateTime.Parse("2014-12-28"), DateTime.Parse("2014-12-29"), DateTime.Parse("2014-12-30"), DateTime.Parse("2015-01-02"), DateTime.Parse("2015-01-03"), DateTime.Parse("2015-01-04"), DateTime.Parse("2015-01-05"), DateTime.Parse("2015-01-06"), DateTime.Parse("2015-01-09"), DateTime.Parse("2015-01-10"), DateTime.Parse("2015-01-11"), DateTime.Parse("2015-01-12"), DateTime.Parse("2015-01-13"), DateTime.Parse("2015-01-16"), DateTime.Parse("2015-01-17"), DateTime.Parse("2015-01-18"), 6 Copyright GrapeCity, Inc. All rights reserved.

DateTime.Parse("2015-01-19"), DateTime.Parse("2015-01-20"), DateTime.Parse("2015-01-23"), DateTime.Parse("2015-01-24"), DateTime.Parse("2015-01-25"), DateTime.Parse("2015-01-26"), DateTime.Parse("2015-01-27"), DateTime.Parse("2015-01-30"), DateTime.Parse("2015-01-31") 'y- 軸に値を追加します Dim valuesy = New List(Of System.Nullable(Of Double))() From { 10, 12, 11, 14, 16, 20, 18, 17, 17.5, 20, 22, 21, 22.5, 20, 21, 20.8, 20, 19, 18, 17, 16, 15, 15, 14, 13, 12, 11.5, 10.9, 10, 9, 9.5, 10, 12, 11, 14, 16, 20, 18, 17, 17.5, 20, 22, 21, 22.5 ' 高値を追加します Dim valueshigh = New List(Of System.Nullable(Of Double))() From { 10, 12, 11, 14, 16, 20, 18, 17, 17.5, 20, 22, 21, 22.5, 20, 21, 20.8, 20, 19, 18, 17, 16, 15, 15, 14, 13, 12, 11.5, 10.9, 10, 9, 9.5, 10, 12, 11, 14, 16, 20, 18, 17, 17.5, 20, 22, 21, 22.5 ' 安値を追加します Dim valueslow = New List(Of System.Nullable(Of Double))() From { 7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10, 12.2, 12, 16, 15.5, 16, 15, 16, 16.5, 16, 16, 15, 14.5, 14, 13.5, 13, 12, 11, 11, 10, 9, 8, 7.5, 7.9, 7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10, 12.2, 12, 16, 15.5, 16 ' 始値を追加します Dim valuesopen = New List(Of System.Nullable(Of Double))() From { 8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5, 17.8, 18.6, 19.8, 18, 16.9, 15.6, 14.7, 14.2, 13.9, 13.2, 12.8, 11.7, 11.2, 10.5, 9.4, 8.9, 8.4, 8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2 ' 終値を追加します Dim valuesclose = New List(Of System.Nullable(Of Double))() From { 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5, 17.8, 18.6, 19.8, 18, 16.9, 15.6, 14.7, 14.2, 13.9, 13.2, 12.8, 11.7, 11.2, 10.5, 9.4, 8.9, 8.4, 8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5 'CandlestickChart 系列を追加します Dim candleseries = New CandlestickChartSeries() candleseries.data.x.addrange(valuesx.toarray(of System.Nullable(Of DateTime))()) candleseries.data.high.addrange(valueshigh.toarray(of System.Nullable(Of Double))()) candleseries.data.high.addrange(valueshigh.toarray(of System.Nullable(Of Double))()) candleseries.data.low.addrange(valueslow.toarray(of System.Nullable(Of Double))()) candleseries.data.open.addrange(valuesopen.toarray(of System.Nullable(Of Double))()) candleseries.data.close.addrange(valuesclose.toarray(of System.Nullable(Of Double))()) candleseries.label = "MSFT" candleseries.legendentry = True Me.C1CandlestickChart1.SeriesList.Add(candleSeries) 7 Copyright GrapeCity, Inc. All rights reserved.

Dim lineseries = New LineChartSeries() lineseries.data.x.addrange(valuesx.toarray(of System.Nullable(Of DateTime))()) lineseries.data.x.addrange(valuesx.toarray(of System.Nullable(Of DateTime))()) lineseries.data.y.addrange(valuesy.toarray(of System.Nullable(Of Double))()) 'ChartNavigator を系列データと連結します Me.ChartNavigator1.SeriesList.Add(lineSeries) 'ChartNavigator に対して TargetSelector を設定します Me.ChartNavigator1.TargetSelector = "#" + Me.C1CandlestickChart1.ClientID ' #region Range Me.ChartNavigator1.RangeMin = DateTime.Parse("2014-12-14").ToOADate() Me.ChartNavigator1.RangeMax = DateTime.Parse("2015-01-04").ToOADate() ここまでの成果 アプリケーションを実行すると ChartNavigator が次の図のように表示されます 8 Copyright GrapeCity, Inc. All rights reserved.

主な要素 次の図に C1ChartNavigator のさまざまな要素を示します ナビゲーションレイアウトは C1ChartNavigator( チャートナビゲータ ) と チャートナビゲータに連結されるメインチャートの 2 つの部分に分かれています 1. メインチャート : ナビゲータで選択した時間範囲のデータがチャートに表示されます チャートに表示されたデータ上にカーソルを置くと ツールチップが表示されます 2. ChartNavigator: チャートナビゲータペインはメインチャートのすぐ下に表示されます ナビゲータをペインの左右にドラッグすることで 目的のデータ範囲までスクロールできます ChartNavigator コントロールには 次の要素が表示されます RangeMin: ナビゲータ範囲の左端の値 RangeMax: ナビゲータ範囲の右端の値 選択範囲 : 選択範囲は 範囲の最小値から最大値までがコントラストの効いた色でビジュアルに表示されます 9 Copyright GrapeCity, Inc. All rights reserved.

設計時サポート C1ChartNavigator は カスタマイズされたコンテキストメニュー スマートタグ およびデザイナを備え 豊富な設計時サポートを提供し オブジェクトモデルの操作を容易にします 以下のセクションでは C1ChartNavigator の設計時環境を使用して C1ChartNavigator コントロールを設定する方法について説明します [C1ChartNavigator のタスク ] メニュー シリーズ一覧 : チャートに表示されるデータを含む配列コレクション SeriesListをクリックすると LineChartSeriesコレクションエディタが表示されます [ 追加 ] ボタンは 新しいLineChartSeriesを追加します [ 削除 ] ボタンは 選択したLineChartSeriesを削除します シリーズスタイル : チャートに表示されるデータに関連するスタイル情報を含む配列コレクション SeriesStylesをクリックすると ChartStyleコレクションエディタが表示されます 10 Copyright GrapeCity, Inc. All rights reserved.

[ 追加 ] ボタンは 新しいChartStyleを追加します [ 削除 ] ボタンは 選択したChartStyleを削除します CDN の使用 :[CDN の使用 ] チェックボックスをオンにすると クライアントリソースがCDNからロードされます デフォルトでは このチェックボックスはオフです CDN パス : コンテンツ配信ネットワークのパスを指定します パスを変更するには ここにURLを入力します JavaScript の結合を有効 : このプロパティを選択すると すべての必要なJavaScriptファイルが1つのファイルに結合されます バージョン情報 :[[ バージョン情報 ] 項目をクリックすると ダイアログボックスが表示され ComponentOne for ASP.NET Web Formsのバージョン番号とオンラインリソースが表示されます 対象のセレクター : ターゲットチャートのjQueryセレクタ文字列を指定します たとえば IDが "chart1" のチャートを C1ChartNavigatorに連結するには TargetSelectorの値を "#chart1" に設定します 11 Copyright GrapeCity, Inc. All rights reserved.

機能 サポートされるチャートタイプ C1ChartNavigator はさまざまなタイプのチャートに連結して 長期間にわたるデータを特定の期間ごとにナビゲートすることができます ChartNavigator は 次のチャートタイプに連結できます C1LineChart:ChartNavigator を LineChart と組み合わせると 株価や売上データなどのトレンドやパフォーマンスをビジュアルに表示する場合に便利です Type を Area に変更して 関連する属性間のトレンドを表示することもできます C1BarChart:ChartNavigator を BarChart と組み合わせて使用すると 特定の期間にわたるデータの比例関係や 年代別や月別などのカテゴリにグループ化されたデータをビジュアルに表示できます C1CandlestickChart:ChartNavigator を CandleStickChart と共に使用すると データの詳細な分析を行うことができます 始値 終値 高値 および安値を使用して データを効率よく表示および比較できます ローソク足チャートで使用されるデータとしては 定期的な株価の比較があります ローソク足チャートでは 系列内のデータポイントごとに 5 つの値があります x :X 軸方向の日付の位置を決定します high: その日の最高値を決定し それを Y 軸方向にローソクの上端としてプロットします low: その日の最安値を決定し それを Y 軸方向にローソクの下端としてプロットします open: その日の始値を決定します close: その日の終値を決定します サイズ ChartNavigator コントロールは データのトレンドを表示するチャートに連結されます 相関関係 トレンド パフォーマンスなどを効率よく表現するには ChartNavigator のサイズをメインチャートのサイズに合わせて設定する必要があります ChartNavigator の幅をメインチャートと同じ幅に設定します C1ChartNavigator の高さと幅を設定するには 次の手順を実行します デザイナの場合 1. ChartNavigator を右クリックし [ プロパティ ] を選択して [ プロパティ ] ウィンドウを開きます 2. Height プロパティの値を 50px に設定します 3. Width プロパティの値を 500px に設定します ソースビューの場合 <cc1:c1chartnavigator> タグ内で ChartNavigator の Height プロパティと Width プロパティを設定します ソースビュー <cc1:c1chartnavigator ID="C1ChartNavigator1" runat="server" Height="50px" Width="500px"> コードの場合 Page_Load イベントに次のコードを追加して ChartNavigator の高さと幅を設定します C# C1ChartNavigator1.Height = 50; C1ChartNavigator1.Width = 500; copycode 12 Copyright GrapeCity, Inc. All rights reserved.

VB C1ChartNavigator1.Height = 50 C1ChartNavigator1.Width = 500 copycode 範囲 ChartNavigator の最小値と最大値を設定できます RangeMin プロパティを使用してナビゲータの範囲の開始 ( 左端 ) 位置を RangeMax プロパティを使用してナビゲータの範囲の終了 ( 右端 ) 位置を設定します C1ChartNavigator の範囲を設定するには 次の手順を実行します ソースビューの場合 <cc1:c1chartnavigator> タグ内で ChartNavigator の RangeMin プロパティと RangeMax プロパティを設定します ソースビュー <cc1:c1chartnavigator ID="C1ChartNavigator1" runat="server" RangeMin="10" RangeMin="12"> コードの場合 Page_Load イベントに次のコードを追加して ChartNavigator の範囲を設定します C# this.c1chartnavigator1.rangemin = DateTime.Parse("2014-12-14").ToOADate(); this.c1chartnavigator1.rangemax = DateTime.Parse("2015-01-04").ToOADate(); copycode VB Me.ChartNavigator1.RangeMin = DateTime.Parse("2014-12-14").ToOADate() Me.ChartNavigator1.RangeMax = DateTime.Parse("2015-01-04").ToOADate() copycode ツールチップ ChartNavigator のツールチップのコンテンツをカスタマイズできます デフォルトでは ツールチップ上にカーソルを置くと X 軸の値が表示されます カスタマイズしたテキストを追加して表示することもできます たとえば クイックスタート セクションで作成したサンプルを使用して以下の手順を実行すると ツールチップの値を 株価指数 (2014 年 12 月 ~2015 年 1 月 ) に設定できます デザイナの場合 1. ChartNavigatorコントロールを右クリックし [ プロパティ ] を選択してプロパティウィンドウを開きます 2. Tooltipプロパティに ナビゲータの上にマウスを置いたときに表示するテキストを設定します 3. [F5] キーを押してプロジェクトを実行します ソースビューの場合 ツールチップを表示するには <cc1:c1chartnavigator> タグ内でツールチップテキストを設定します ソースビュー 13 Copyright GrapeCity, Inc. All rights reserved.

<cc1:c1chartnavigator ID="C1ChartNavigator1" runat="server" ToolTip="Stock Index (Dec'14-Jan'15)"> コードの場合 Page_Load イベントに次のコードを追加して ChartNavigator のツールチップをカスタマイズします C# C1ChartNavigator1.ToolTip = " 株価指数 (14 年 12 月 ~15 年 1 月 )"; copycode VB C1ChartNavigator1.ToolTip = " 株価指数 (2014 年 12 月 ~2015 年 1 月 )" copycode アプリケーションを実行すると ChartNavigator が次の図のように表示されます 14 Copyright GrapeCity, Inc. All rights reserved.

ユーザーシナリオ 株価比較 TargetSelector プロパティを使用すると ChartNavigator を複数のチャートに連結できます このシナリオでは 2014 年 12 月から 2015 年 2 月までの株価の比較をチャートに表します ChartNavigator を CandlestickChart と LineChart に連結します CandlestickChart は 始値と終値の関係および高値と安値の関係を効果的に示します 一方 LineChart は さまざまなデータグループ間の値の変化を表示します デザイナの場合 次の手順を実行して 1 つのチャートナビゲータに連結された 2 つのチャートデータを描画します 1. Visual Studioで 新しいASP.Net Webアプリケーションを作成し 新しいWeb フォームを追加します 2. ツールボックスでC1ChartNavigatorコントロールを見つけ それをWebフォームに配置します 3. ツールボックスでC1CandlestickChartとC1LineChartを見つけ それをWebフォームに配置します 4. クイックスタート で説明したように CandlestickChartにデータを追加します 5. 同様に LineChartSeriesコレクションエディタで [ 追加 ] ボタンをクリックして 新しいLineChartSeriesを追加します 6. プロパティペインで [Data] ノードを展開した後 [X] を展開してDateTime 値を入力し [Y] を展開してDouble 値を入力します X と Y の値は LineChart と CandlestickChart で同じでなければなりません ソースビューの場合 ソースビュー <script type="text/javascript"> function hintcontent() { return this.label + ' - ' + Globalize.format(this.x, "d") + '\n High:' + this.high + '\n Low:' + this.low + '\n Open:' + this.open + '\n Close:' + this.close; </script> <cc1:c1candlestickchart ID="C1CandlestickChart1" runat="server" Height="250" Width="900" MarginTop="5" MarginBottom="10" MarginLeft="5" MarginRight="5"> <Animation Enabled="false" /> <TextStyle FontFamily="Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, H elvetica Neue, Arial, sans-serif" FontSize="13px"> </TextStyle> <Header Compass="North" Text="2014 年 12 月 ~2105 年 1 月の株価指数 " TextStyle-FontSize="14px"></Header> <Legend Visible="false"></Legend> <Axis> <X Visible="false" TextVisible="false"> <GridMajor Visible="False"></GridMajor> </X> <Y Visible="true" Compass="West"> <GridMajor Visible="True"></GridMajor> <GridMinor Visible="False"></GridMinor> </Y> </Axis> <CandlestickChartSeriesStyles> <cc1:candlestickchartstyle> <HighLow Width="2"> <Fill Color="#8C8C8C"></Fill> 15 Copyright GrapeCity, Inc. All rights reserved.

</HighLow> <FallingClose Width="6"> <Fill Color="#F07E6E"></Fill> </FallingClose> <RisingClose Width="6"> <Fill Color="#90CD97"></Fill> </RisingClose> </cc1:candlestickchartstyle> </CandlestickChartSeriesStyles> <Hint> <ContentStyle FontFamily="Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif" FontSize="12px"> </ContentStyle> <Content Function="hintContent" /> <HintStyle Stroke="Transparent"> <Fill Color="#444444"> </Fill> </HintStyle> </Hint> </cc1:c1candlestickchart> <cc1:c1linechart ID="C1LineChart1" runat="server" Height="250" Width="900" MarginTop="5" MarginBottom="10" MarginLeft="5" MarginRight="5" > <Animation Enabled="false" /> <Header Compass="North" ></Header> <Footer Compass="South" Visible="False"></Footer> <Legend Visible="false"></Legend> <Axis> <X Visible="false" TextVisible="false"> <GridMajor Visible="False"></GridMajor> <GridMinor Visible="False"></GridMinor> </X> <Y Visible="false" Compass="West"> <GridMajor Visible="True"></GridMajor> <GridMinor Visible="False"></GridMinor> </Y> </Axis> Hint Enable="False"> </Hint> <Indicator Visible="False"></Indicator> </cc1:c1linechart> <cc1:c1chartnavigator ID="ChartNavigator1" runat="server" Width="900" Height="56"> <SeriesStyles> <cc1:chartstyle Fill-Color="#88bde6" Stroke="#88bde6"></cC1:ChartStyle> </SeriesStyles> </cc1:c1chartnavigator> コードの場合 Page_Load イベントに次のコードを追加して 株価データを追加し 2 つのチャートを ChartNavigator に連結します C# if (!IsPostBack) { PrepareOptions(); copycode 16 Copyright GrapeCity, Inc. All rights reserved.

private void PrepareOptions() { var valuesx = new List<DateTime?>(){ DateTime.Parse("2014-12-01"), DateTime.Parse("2014-12-02"), DateTime.Parse("2014-12-05"), DateTime.Parse("2014-12-06"), DateTime.Parse("2014-12-07"), DateTime.Parse("2014-12-08"), DateTime.Parse("2014-12-09"), DateTime.Parse("2014-12-12"), DateTime.Parse("2014-12-13"), DateTime.Parse("2014-12-14"), DateTime.Parse("2014-12-15"), DateTime.Parse("2014-12-16"), DateTime.Parse("2014-12-19"), DateTime.Parse("2014-12-20"), DateTime.Parse("2014-12-21"), DateTime.Parse("2014-12-22"), DateTime.Parse("2014-12-23"), DateTime.Parse("2014-12-26"), DateTime.Parse("2014-12-27"), DateTime.Parse("2014-12-28"), DateTime.Parse("2014-12-29"), DateTime.Parse("2014-12-30"), DateTime.Parse("2015-01-02"), DateTime.Parse("2015-01-03"), DateTime.Parse("2015-01-04"), DateTime.Parse("2015-01-05"), DateTime.Parse("2015-01-06"), DateTime.Parse("2015-01-09"), DateTime.Parse("2015-01-10"), DateTime.Parse("2015-01-11"), DateTime.Parse("2015-01-12"), DateTime.Parse("2015-01-13"), DateTime.Parse("2015-01-16"), DateTime.Parse("2015-01-17"), DateTime.Parse("2015-01-18"), DateTime.Parse("2015-01-19"), DateTime.Parse("2015-01-20"), DateTime.Parse("2015-01-23"), DateTime.Parse("2015-01-24"), DateTime.Parse("2015-01-25"), DateTime.Parse("2015-01-26"), DateTime.Parse("2015-01-27"), DateTime.Parse("2015-01-30"), DateTime.Parse("2015-01-31"), DateTime.Parse("2015-02-02"), DateTime.Parse("2015-02-03"), DateTime.Parse("2015-02-04"), DateTime.Parse("2015-02-05"), DateTime.Parse("2015-02-06"), DateTime.Parse("2015-02-09"), DateTime.Parse("2015-02-10"), DateTime.Parse("2015-02-11"), DateTime.Parse("2015-02-12"), DateTime.Parse("2015-02-13"), DateTime.Parse("2015-02-16"), DateTime.Parse("2015-02-17"), 17 Copyright GrapeCity, Inc. All rights reserved.

DateTime.Parse("2015-02-18"), DateTime.Parse("2015-02-19"), DateTime.Parse("2015-02-20"), DateTime.Parse("2015-02-23"), DateTime.Parse("2015-02-24"), DateTime.Parse("2015-02-25"), DateTime.Parse("2015-02-26"), DateTime.Parse("2015-02-27"), DateTime.Parse("2015-02-28") ; var valuesy = new List<double?>() { 10,12,11,14,16,20,18,17, 17.5,20,22,21,22.5,20,21,20.8,20,19,18,17,16,15,15,14,13,12, 11.5,10.9,10,9,9.5,10,12,11,14,16,20,18,17,17.5,20, 22,21,22.5,10,12,11,14,16,20,18,17,17.5,20,22,21,22.5, 20,21,20.8,20,19,18,17,16 ; var valueshigh = new List<double?>() { 10,12,11,14,16,20,18,17, 17.5,20,22,21,22.5,20,21,20.8,20,19,18,17,16,15,15,14,13,12, 11.5,10.9,10,9,9.5,10,12,11,14,16,20,18,17,17.5,20, 22,21,22.5,10,12,11,14,16,20,18,17,17.5,20,22,21,22.5, 20,21,20.8,20,19,18,17,16 ; var valueslow = new List<double?>() { 7.5,8.6,4.4,4.2,8,9,11,10, 12.2,12,16,15.5,16,15,16,16.5,16,16,15,14.5,14,13.5,13,12,11, 11,10,9,8,7.5,7.9,7.5,8.6,4.4,4.2,8,9,11,10,12.2,12, 16,15.5,16,10,12,11,14,16,20,18,17,17.5,20,22,21,22.5, 20,21,20.8,20,19,18,17,16 ; var valuesopen = new List<double?>() { 8,8.6,11,6.2,13.8,15,14,12, 16,15,17,18,17.2,18.5,17.8,18.6,19.8,18,16.9,15.6,14.7,14.2, 13.9,13.2, 12.8,11.7,11.2,10.5,9.4,8.9,8.4,8,8.6,11,6.2,13.8,15, 14,12,16,15,17,18,17.2,10,12,11,14,16,20,18,17,17.5,20, 22,21,22.5,20,21,20.8,20,19,18,17,16 ; var valuesclose = new List<double?>() { 8.6,11,6.2,13.8,15,14,12, 16,15,17,18,17.2,18.5,17.8,18.6,19.8,18,16.9,15.6,14.7,14.2, 13.9,13.2, 12.8,11.7,11.2,10.5,9.4,8.9,8.4,8,8.6,11,6.2,13.8,15, 14,12,16,15,17,18,17.2,18.5,10,12,11,14,16,20,18,17, 17.5,20,22,21,22.5,20,21,20.8,20,19,18,17,16; var candleseries = new CandlestickChartSeries(); candleseries.data.x.addrange(valuesx.toarray<datetime?>()); candleseries.data.high.addrange(valueshigh.toarray<double?>()); candleseries.data.low.addrange(valueslow.toarray<double?>()); candleseries.data.open.addrange(valuesopen.toarray<double?>()); candleseries.data.close.addrange(valuesclose.toarray<double?>()); candleseries.label = "MSFT"; candleseries.legendentry = true; this.c1candlestickchart1.serieslist.add(candleseries); var lineseries = new LineChartSeries(); lineseries.data.x.addrange(valuesx.toarray<datetime?>()); lineseries.data.y.addrange(valuesy.toarray<double?>()); this.chartnavigator1.serieslist.add(lineseries); this.c1linechart1.serieslist.add(lineseries); this.chartnavigator1.targetselector = "#" + this.c1candlestickchart1.clientid + ", #" + this.c1linechart1.clientid; ; this.chartnavigator1.rangemin = DateTime.Parse("2014-12-14").ToOADate(); this.chartnavigator1.rangemax = DateTime.Parse("2015-01-04").ToOADate(); VB copycode 18 Copyright GrapeCity, Inc. All rights reserved.

If Not IsPostBack Then PrepareOptions() End If End Sub Private Sub PrepareOptions() Dim valuesx = New List(Of System.Nullable(Of DateTime))() From { DateTime.Parse("2014-12-01"), DateTime.Parse("2014-12-02"), DateTime.Parse("2014-12-05"), DateTime.Parse("2014-12-06"), DateTime.Parse("2014-12-07"), DateTime.Parse("2014-12-08"), DateTime.Parse("2014-12-09"), DateTime.Parse("2014-12-12"), DateTime.Parse("2014-12-13"), DateTime.Parse("2014-12-14"), DateTime.Parse("2014-12-15"), DateTime.Parse("2014-12-16"), DateTime.Parse("2014-12-19"), DateTime.Parse("2014-12-20"), DateTime.Parse("2014-12-21"), DateTime.Parse("2014-12-22"), DateTime.Parse("2014-12-23"), DateTime.Parse("2014-12-26"), DateTime.Parse("2014-12-27"), DateTime.Parse("2014-12-28"), DateTime.Parse("2014-12-29"), DateTime.Parse("2014-12-30"), DateTime.Parse("2015-01-02"), DateTime.Parse("2015-01-03"), DateTime.Parse("2015-01-04"), DateTime.Parse("2015-01-05"), DateTime.Parse("2015-01-06"), DateTime.Parse("2015-01-09"), DateTime.Parse("2015-01-10"), DateTime.Parse("2015-01-11"), DateTime.Parse("2015-01-12"), DateTime.Parse("2015-01-13"), DateTime.Parse("2015-01-16"), DateTime.Parse("2015-01-17"), DateTime.Parse("2015-01-18"), DateTime.Parse("2015-01-19"), DateTime.Parse("2015-01-20"), DateTime.Parse("2015-01-23"), DateTime.Parse("2015-01-24"), DateTime.Parse("2015-01-25"), DateTime.Parse("2015-01-26"), DateTime.Parse("2015-01-27"), DateTime.Parse("2015-01-30"), DateTime.Parse("2015-01-31") Dim valuesy = New List(Of System.Nullable(Of Double))() From { 10, 12, 11, 14, 16, 20, 18, 17, 17.5, 20, 22, 21, 22.5, 20, 21, 20.8, 20, 19, 18, 17, 16, 15, 15, 14, 13, 12, 11.5, 10.9, 10, 9, 9.5, 10, 12, 11, 14, 16, 20, 18, 17, 17.5, 20, 22, 21, 22.5 Dim valueshigh = New List(Of System.Nullable(Of Double))() From { 19 Copyright GrapeCity, Inc. All rights reserved.

10, 12, 11, 14, 16, 20, 18, 17, 17.5, 20, 22, 21, 22.5, 20, 21, 20.8, 20, 19, 18, 17, 16, 15, 15, 14, 13, 12, 11.5, 10.9, 10, 9, 9.5, 10, 12, 11, 14, 16, 20, 18, 17, 17.5, 20, 22, 21, 22.5 Dim valueslow = New List(Of System.Nullable(Of Double))() From { 7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10, 12.2, 12, 16, 15.5, 16, 15, 16, 16.5, 16, 16, 15, 14.5, 14, 13.5, 13, 12, 11, 11, 10, 9, 8, 7.5, 7.9, 7.5, 8.6, 4.4, 4.2, 8, 9, 11, 10, 12.2, 12, 16, 15.5, 16 Dim valuesopen = New List(Of System.Nullable(Of Double))() From { 8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5, 17.8, 18.6, 19.8, 18, 16.9, 15.6, 14.7, 14.2, 13.9, 13.2, 12.8, 11.7, 11.2, 10.5, 9.4, 8.9, 8.4, 8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2 Dim valuesclose = New List(Of System.Nullable(Of Double))() From { 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5, 17.8, 18.6, 19.8, 18, 16.9, 15.6, 14.7, 14.2, 13.9, 13.2, 12.8, 11.7, 11.2, 10.5, 9.4, 8.9, 8.4, 8, 8.6, 11, 6.2, 13.8, 15, 14, 12, 16, 15, 17, 18, 17.2, 18.5 Dim candleseries = New CandlestickChartSeries() candleseries.data.x.addrange(valuesx.toarray(of System.Nullable(Of DateTime))()) candleseries.data.high.addrange(valueshigh.toarray(of System.Nullable(Of Double))()) candleseries.data.low.addrange(valueslow.toarray(of System.Nullable(Of Double))()) candleseries.data.open.addrange(valuesopen.toarray(of System.Nullable(Of Double))()) candleseries.data.close.addrange(valuesclose.toarray(of System.Nullable(Of Double))()) candleseries.label = "MSFT" candleseries.legendentry = True Me.C1CandlestickChart1.SeriesList.Add(candleSeries) Dim lineseries = New LineChartSeries() lineseries.data.x.addrange(valuesx.toarray(of System.Nullable(Of DateTime))()) lineseries.data.y.addrange(valuesy.toarray(of System.Nullable(Of Double))()) Me.ChartNavigator1.SeriesList.Add(lineSeries) Me.C1LineChart1.SeriesList.Add(lineSeries) Me.ChartNavigator1.TargetSelector = "#" + Me.C1CandlestickChart1.ClientID + "," #" + Me.C1LineChart1.ClientID Me.ChartNavigator1.RangeMin = DateTime.Parse("2014-12-14").ToOADate() Me.ChartNavigator1.RangeMax = DateTime.Parse("2015-01-04").ToOADate() End Sub End Class ここまでの成果 アプリケーションを実行すると ChartNavigator が次の図のように表示されます 20 Copyright GrapeCity, Inc. All rights reserved.

21 Copyright GrapeCity, Inc. All rights reserved.