CodeZine(コードジン)

特集ページ一覧

ComponentOne Studio for ASP.NET Web Formsで使えるコンポーネント(入力補助/チャート編)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/07/14 14:00
目次

チャート関連コントロール

 HTMLCharts for Web Formsは、HTML5/SVGとして出力されるコンポーネントで、SVGをサポートしているブラウザであれば特別なプラグインなしでチャートを表示させることができます。

チャート関連コントロールの紹介

 チャート関連のコンポーネントには、以下のコントロールが収録されています。

チャート関連コントロール
コントロール 概要
BarChart 縦棒グラフ、横棒グラフ
PieChart 円グラフ
ScatterChart 散布図
CompositeChart 異なるグラフ種を組み合わせた複合グラフ
LineChart 折れ線グラフ
BubbleChart 3次形データ表示グラフ
CandlestickChart 株価チャート
ChartNavigator 概要と詳細の2つのグラフを連携させるコントロール

ChartNavigatorを利用したBarChartとLineChartの組み合わせ

 ChartNavigatorは、BarChart、LineChart、CandlestickChartの2つを組み合わせることで、大量データから一部の範囲を指定してスクロールやズームを行うなどの、高度なビジュアル表現を実現することのできるコントロールです。ここでは、1か月分のPVデータの概要を折れ線グラフ、一部期間の詳細データを棒グラフとして、ChartNavigatorを使って両方のグラフを連携するサンプルプログラムを紹介します。

サンプル実行例
サンプル実行例

 サンプルとしてChart.aspxという名前でWebフォームをプロジェクトに追加し、ツールボックスから棒グラフ用に「C1BarChart」を、棒グラフと折れ線グラフを連携させるために「C1ChartNavigator」をデザイン画面にドロップします。

 棒グラフ用の定義は以下のように実装しました。

リスト4 C1BarChartの設定(Chart.aspx)
  <%-- C1BarChartの設定 --%>
  <wijmo:C1BarChart runat="server" ID="C1BarChart1"
     Horizontal="False" Height="400" Width="700">
  <Hint>
    <%-- ツールチップヒントで呼び出すJavaScriptの関数名 --%>
    <Content Function="hintContent" />
    <%-- 省略 --%>
  </Hint>
  <%-- 省略 --%>
  <Axis>
    <%-- 省略 --%>
    <%-- Y軸の設定 --%>
    <Y Text="PV" Compass="West" AnnoFormatString="n0"
      Max="1000" Min="0" Alignment="Far">
      <%-- 省略 --%>
    </Y>
  </Axis>
</wijmo:C1BarChart>

 C1BarChart要素の属性HorizontalにTrueを指定すると横棒グラフ、Falseを指定すると縦棒グラフとして表示されます。

 Axis以下ではX軸とY軸の設定を行います。各軸の設定はそれぞれXまたはY要素の属性値や子要素として設定します。例えば軸のラベルを表示させるにはText属性に、目盛りの数値フォーマットを指定するにはAnnoFormatString属性にそれぞれ適切な値を指定します。

 Hint要素ではツールチップヒントのさまざまな設定を行うことができますが、注目すべきはContent要素のFunction属性値で、値としてツールチップの中身を表示するためのJavaScript関数名を指定します。

 ツールチップヒントで呼び出すJavaScript関数は、次のようにHTMLのscript要素に定義します。以下の例では、this.labelで凡例のラベル文字列、this.xでX軸の日付、this.yでPVの数値を組み合わせることでヒント用の文字列を作成しています。

リスト5 ツールチップヘルプ関数の定義(Chart.aspx)
<script type="text/javascript">
  function hintContent() {
    return this.label + ' - ' +
      Globalize.format(this.x, "d") +
      ' PV:' + this.y;
  }
</script>

 次にC1ChartNavigatorコントロールの定義です。詳細グラフとして連携させるグラフは、C1ChartNavigator要素のTargetSelector属性に指定します。

 XAxis要素ではX軸の設定として、AnnoFormatString属性で日付フォーマットを、UnitMajorで軸目盛りの設定を行っています。今回は日付をX軸にとっているので7日ごとに目盛りを表示するようにしています。

リスト6 C1ChartNavigatorの設定(Chart.aspx)
<%-- C1ChartNavigatorの設定 --%>
<wijmo:C1ChartNavigator ID="ChartNavigator1" runat="server"
  Width="700" Height="60" TargetSelector="#C1BarChart1">
  <%-- 省略 --%>
  <%-- X軸の設定 --%>
  <XAxis AnnoFormatString="M/d" UnitMajor="7" AutoMajor="False"></XAxis>
</wijmo:C1ChartNavigator>

 次に、C#側のコードです。

リスト7 グラフデータの設定設定(Chart.aspx.cs)
public partial class Chart : System.Web.UI.Page
{
  // 省略
  private void PrepareOptions()
  {
    // X軸の値(日付)
    var valuesX = new List<DateTime?>(){
      DateTime.Parse("2015-05-01"),
      // 省略
      DateTime.Parse("2015-05-31")
    };
    // Y軸の値(PV)
    var valuesY = new List<double?>() {
      // 省略
    };
    // 棒グラフ(詳細情報)の系列データ設定
    var barSeries = new BarChartSeries();
    barSeries.Data.X.AddRange(valuesX.ToArray<DateTime?>());
    barSeries.Data.Y.AddRange(valuesY.ToArray<double?>());
    barSeries.Label = "商品一覧ページ";
    barSeries.LegendEntry = true;
    this.C1BarChart1.SeriesList.Add(barSeries);
    // 折れ線グラフ(概要情報)の系列データ設定
    var lineSeries = new LineChartSeries();
    lineSeries.Data.X.AddRange(valuesX.ToArray<DateTime?>());
    lineSeries.Data.Y.AddRange(valuesY.ToArray<double?>());
    this.ChartNavigator1.SeriesList.Add(lineSeries);
    // 初期選択範囲を設定
    this.ChartNavigator1.RangeMin = DateTime.Parse("2015-05-14").ToOADate();
    this.ChartNavigator1.RangeMax = DateTime.Parse("2015-05-21").ToOADate();
  }
}

 PrepareOptionsメソッドでグラフデータの登録を行っています。グラフデータはデータベースなどから取得することも可能ですが、このサンプルでは直接リストとしてデータを与えています。X軸とY軸の値をそれぞれvaluesXとvaluesYのリストに追加し、棒グラフの系列であるbarSeriesと折れ線グラフの系列であるlineSeriesに追加します。

 このサンプルを実行してブラウザで表示すると、上部に詳細情報として棒グラフが、下部に概要情報として折れ線グラフが表示されます。概要グラフでは棒グラフに表示されている範囲を変更できるようになっており、右端、左端のバーをドラッグすることで表示範囲を変更できます。範囲を変更すると、その操作に連動して棒グラフの範囲も動的に変更されていることが分かります。

概要グラフの表示範囲を広げた例
概要グラフの表示範囲を広げた例

まとめ

 本記事では、ComponentOne Studio for ASP.NET Web Formsで提供されるコンポーネントの概要と、入力およびチャート関連コンポーネントについて紹介しました。特に入力コンポーネントでは日本語を扱う際に便利な機能が提供されており、実際のWebアプリケーション開発においての効率化を実現することになるでしょう。

 次回は、イベントカレンダー、グリッドビューなどの注目すべきコンポーネントを紹介する予定です。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト 花田 善仁(ハナダ ヨシヒト)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

バックナンバー

連載:ComponentZine(ComponentOne)

もっと読む

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5