SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)(AD)

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

 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アプリケーション開発においての効率化を実現することになるでしょう。

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

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8806 2021/03/29 14:29

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング