チャート関連コントロール
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」をデザイン画面にドロップします。
棒グラフ用の定義は以下のように実装しました。
<%-- 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の数値を組み合わせることでヒント用の文字列を作成しています。
<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日ごとに目盛りを表示するようにしています。
<%-- 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#側のコードです。
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アプリケーション開発においての効率化を実現することになるでしょう。
次回は、イベントカレンダー、グリッドビューなどの注目すべきコンポーネントを紹介する予定です。
