ChartNavigator for ASP.NET Web Forms

Size: px

Start display at page:

Download "ChartNavigator for ASP.NET Web Forms"

さいぞうよしなが
4 years ago
Views:

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

3 製品の概要 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.

4 クイックスタートこのトピックでは 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.

5 <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(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), 4 Copyright GrapeCity, Inc. All rights reserved.

6 DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "); //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.

7 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(" ").ToOADate(); this.c1chartnavigator1.rangemax = DateTime.Parse(" ").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(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), 6 Copyright GrapeCity, Inc. All rights reserved.

8 DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" ") '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.

9 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(" ").ToOADate() Me.ChartNavigator1.RangeMax = DateTime.Parse(" ").ToOADate() ここまでの成果アプリケーションを実行すると ChartNavigator が次の図のように表示されます 8 Copyright GrapeCity, Inc. All rights reserved.

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

SeriesListをクリックすると LineChartSeriesコレクションエディタが表示されます [ 追加 ] ボタンは新しいLineChartSeriesを追加します [ 削除 ] ボタンは選択したLineChartSeriesを削除します

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

12 [ 追加 ] ボタンは新しい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.

13 機能サポートされるチャートタイプ 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.

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

15 <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.

16 ユーザーシナリオ株価比較 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.

17 </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.

18 private void PrepareOptions() { var valuesx = new List<DateTime?>(){ DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), 17 Copyright GrapeCity, Inc. All rights reserved.

19 DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" ") ; 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(" ").ToOADate(); this.chartnavigator1.rangemax = DateTime.Parse(" ").ToOADate(); VB copycode 18 Copyright GrapeCity, Inc. All rights reserved.

20 If Not IsPostBack Then PrepareOptions() End If End Sub Private Sub PrepareOptions() Dim valuesx = New List(Of System.Nullable(Of DateTime))() From { DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" "), DateTime.Parse(" ") 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.

21 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(" ").ToOADate() Me.ChartNavigator1.RangeMax = DateTime.Parse(" ").ToOADate() End Sub End Class ここまでの成果アプリケーションを実行すると ChartNavigator が次の図のように表示されます 20 Copyright GrapeCity, Inc. All rights reserved.

FileExplorer for ASP.NET Web Forms

FileExplorer for ASP.NET Web Forms 2018.04.12 更新グレープシティ株式会社目次製品の概要 2 ComponentOne for ASP.NET Web Formsのヘルプ 2 ビジュアル要素 3 クイックスタート : フォルダパスの追加 4-5 エクスプローラーの機能 6 複数ファイルの選択 6-7 フォルダの作成と管理 7 ファイル操作の無効化 7