[TrueChart for ASP.NET（2D）] 動的に作成したチャートでスクロールを有効にする方法 – MESCIUS ナレッジベース

作成日: 2015/07/01 最終更新日: 2015/07/01

文書種別

使用方法

詳細

動的に作成したWebChartにおいてスクロールを有効にするには、ポストバック時にもPage_Loadにてチャートコンポーネントを画面に配置する必要があります。

スクロールバーやスクロールボタンのクリック時にはポストバックが発生します。
この時、動的に作成したチャートコンポーネントは再度画面に配置する必要があります。
さらにIDを設定する必要があります。これはスクロール後のチャート画像はIDの一致するチャートコンポーネントに描画されるためです。

◎サンプルコード(VB)

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
　　' チャートを作成
　　Dim chart As New C1WebChart()
　　' チャートにIDを設定
　　chart.ID = "webchart"
　　' フォームにチャートを追加
　　Me.form1.Controls.Add(chart)

　　' 新しいグラフの作成
　　If Not Page.IsPostBack Then
　　　　' チャートサイズの設定
　　　　chart.Height = 300
　　　　chart.Width = 500
　　　　' チャート種の設定
　　　　chart.ChartGroups.Group0.ChartType = Chart2DTypeEnum.XYPlot
　　　　' 既存のデータのクリア
　　　　chart.ChartGroups.Group0.ChartData.SeriesList.Clear()

　　　　' チャートデータの作成
　　　　Dim xValue As Double()
　　　　Dim yValue As Double()
　　　　Dim r As New Random()
　　　　For j As Integer = 0 To 4
　　　　　　xValue = New Double() {0, 1.0, 2.0, 3.0, 4.0, 5.0}
　　　　　　yValue = New Double() {
　　　　　　　　r.[Next](0, 50),
　　　　　　　　r.[Next](0, 50),
　　　　　　　　r.[Next](0, 50),
　　　　　　　　r.[Next](0, 50),
　　　　　　　　r.[Next](0, 50),
　　　　　　　　r.[Next](0, 50)
　　　　　　}

　　　　　　' 系列の設定
　　　　　　Dim series As ChartDataSeries = chart.ChartGroups.Group0.ChartData.SeriesList.AddNewSeries()
　　　　　　series.X.CopyDataIn(xValue)
　　　　　　series.Y.CopyDataIn(yValue)
　　　　Next

　　　　' X軸設定
　　　　chart.ChartArea.AxisX.Min = 0
　　　　chart.ChartArea.AxisX.Max = 5
　　　　chart.ChartArea.AxisX.ScrollBar.Buttons = AxisScrollBarButtonFlags.ScrollButtons
　　　　chart.ChartArea.AxisX.ScrollBar.Visible = True
　　　　chart.ChartArea.AxisX.ScrollBar.Scale = 0.5
　　　　chart.ChartArea.AxisX.ScrollBar.Value = 0.0
　　End If
End Sub

◎サンプルコード(C#)

protected void Page_Load(object sender, EventArgs e)
{
　　// チャートを作成
　　C1WebChart chart = new C1WebChart();
　　// チャートにIDを設定
　　chart.ID = "webchart";
　　// フォームにチャートを追加
　　this.form1.Controls.Add(chart);

　　// 新しいグラフの作成
　　if (!Page.IsPostBack)
　　{
　　　　// チャートサイズの設定
　　　　chart.Height = 300;
　　　　chart.Width = 500;
　　　　// チャート種の設定
　　　　chart.ChartGroups.Group0.ChartType = Chart2DTypeEnum.XYPlot;
　　　　// 既存のデータのクリア
　　　　chart.ChartGroups.Group0.ChartData.SeriesList.Clear();

　　　　// チャートデータの作成
　　　　double[] xValue;
　　　　double[] yValue;
　　　　Random r = new Random();
　　　　for (int j = 0; j < 5; j++)
　　　　{
　　　　　　xValue = new double[] { 0, 1d, 2d, 3d, 4d, 5d };
　　　　　　yValue = new double[] {
　　　　　　　　r.Next(0, 50),
　　　　　　　　r.Next(0, 50),
　　　　　　　　r.Next(0, 50),
　　　　　　　　r.Next(0, 50),
　　　　　　　　r.Next(0, 50),
　　　　　　　　r.Next(0, 50)
　　　　　　};

　　　　　　// 系列の設定
　　　　　　ChartDataSeries series = chart.ChartGroups.Group0.ChartData.SeriesList.AddNewSeries();
　　　　　　series.X.CopyDataIn(xValue);
　　　　　　series.Y.CopyDataIn(yValue);
　　　　}

　　　　// X軸設定
　　　　chart.ChartArea.AxisX.Min = 0;
　　　　chart.ChartArea.AxisX.Max = 5;
　　　　chart.ChartArea.AxisX.ScrollBar.Buttons = AxisScrollBarButtonFlags.ScrollButtons;
　　　　chart.ChartArea.AxisX.ScrollBar.Visible = true;
　　　　chart.ChartArea.AxisX.ScrollBar.Scale = 0.5;
　　　　chart.ChartArea.AxisX.ScrollBar.Value = 0.0;
　　}
}

旧文書番号

81387