［Wijmo入門］FlexChartの使い方 – 基本機能編（3） –

「Wijmo（ウィジモ）」は業務アプリケーションの様々な要件に対応できるUI部品を備えたJavaScriptライブラリです。

Wijmoには、多機能で拡張性の高いチャートコントロール「FlexChart（フレックスチャート）」が含まれています。この記事では、FlexChartコントロールを使って折れ線グラフと面グラフを作成する方法を紹介します。

開発環境の準備とWijmoの参照
折れ線グラフを作成する
折れ線グラフにもう1つのY軸を追加する
面グラフを作成する
面グラフに範囲セレクターを追加する
さいごに

開発環境の準備とWijmoの参照

この記事では以下の開発環境を使用します。

作成するファイルは次の10個です。紹介する機能ごとにHTMLファイルとJavaScriptファイルを分けています。

page1.html	ページ本体。ページの要素としてFlexChartコントロール（折れ線グラフ）を配置します
page2.html	ページ本体。ページの要素としてFlexChartコントロール（2つのY軸）を配置します
page3.html	ページ本体。ページの要素としてFlexChartコントロール（面グラフ）を配置します
page4.html	ページ本体。ページの要素としてFlexChartコントロール（範囲セレクター）を配置します
page1.js	FlexChartコントロール（折れ線グラフ）を作成するコードを記載します
page2.js	FlexChartコントロール（2つのY軸）を作成するコードを記載します
page3.js	FlexChartコントロール（面グラフ）を作成するコードを記載します
page4.js	FlexChartコントロール（範囲セレクター）を作成するコードを記載します
data.js	FlexChartコントロールに表示するデータを記載します
styles.css	各種ページ要素のスタイル定義を記載します

「data.js」にはページで参照するデータを記載しておきます。

function getDataA() {
    return[
        {'month': '1月', 'temp': 1.7, 'rh': 66},
        {'month': '2月', 'temp': 1.9, 'rh': 66},
        {'month': '3月', 'temp': 6.4, 'rh': 66},
        {'month': '4月', 'temp': 11.8, 'rh': 69},
        {'month': '5月', 'temp': 16.5, 'rh': 69},
        {'month': '6月', 'temp': 20.2, 'rh': 78},
        {'month': '7月', 'temp': 24.9, 'rh': 85},
        {'month': '8月', 'temp': 25.1, 'rh': 81},
        {'month': '9月', 'temp': 22.2, 'rh': 82},
        {'month': '10月', 'temp': 15.5, 'rh': 72},
        {'month': '11月', 'temp': 11.9, 'rh': 68},
        {'month': '12月', 'temp': 4.2, 'rh': 73},
    ];
}

function getDataB() {
    return[
        {'day': '1日', 'temp1': 3.6, 'temp2': 2.8},
        {'day': '2日', 'temp1': 0.7, 'temp2': 1.4},
        {'day': '3日', 'temp1': 2.2, 'temp2': 0.4},
        {'day': '4日', 'temp1': 1.9, 'temp2': 1.4},
        {'day': '5日', 'temp1': 1.7, 'temp2': 2.2},
        {'day': '6日', 'temp1': 2.2, 'temp2': 3.8},
        {'day': '7日', 'temp1': 2.8, 'temp2': 6.4},
        {'day': '8日', 'temp1': 3.2, 'temp2': 4.1},
        {'day': '9日', 'temp1': 4.5, 'temp2': 1.1},
        {'day': '10日', 'temp1': 1.5, 'temp2': -1.6},
        {'day': '11日', 'temp1': 4.3, 'temp2': 4.3},
        {'day': '12日', 'temp1': 6.1, 'temp2': 4.7},
        {'day': '13日', 'temp1': 8.2, 'temp2': 3.1},
        {'day': '14日', 'temp1': 9.4, 'temp2': 0.2},
        {'day': '15日', 'temp1': 6.8, 'temp2': -1.7},
        {'day': '16日', 'temp1': 4.4, 'temp2': 0.7},
        {'day': '17日', 'temp1': 2.5, 'temp2': 4.4},
        {'day': '18日', 'temp1': 2.2, 'temp2': 7.7},
        {'day': '19日', 'temp1': 1.7, 'temp2': 5.9},
        {'day': '20日', 'temp1': 4.8, 'temp2': 2.4},
        {'day': '21日', 'temp1': 1.1, 'temp2': -0.3},
        {'day': '22日', 'temp1': 0.3, 'temp2': 1.5},
        {'day': '23日', 'temp1': 0.3, 'temp2': 3.2},
        {'day': '24日', 'temp1': -0.2, 'temp2': 6.5},
        {'day': '25日', 'temp1': -5.4, 'temp2': 3.7},
        {'day': '26日', 'temp1': -1.5, 'temp2': 2.1},
        {'day': '27日', 'temp1': -1.2, 'temp2': 4.6},
        {'day': '28日', 'temp1': -1.2, 'temp2': 8.7},
        {'day': '29日', 'temp1': -1.9, 'temp2': NaN},
        {'day': '30日', 'temp1': -0.4, 'temp2': NaN},
        {'day': '31日', 'temp1': -0.9, 'temp2': NaN}
    ];
}

getDataAメソッドで取得するデータは、2022年の仙台の月ごとの気温と湿度です。getDataBメソッドでは2023年の1月と2月の日ごとの気温データを取得します。

また、ページ上の要素のスタイルを以下のように「styles.css」で定義します。

.wj-flexchart .wj-header .wj-title{
    font-size: 120%;
    font-weight: bold;
}
.wj-flexchart .wj-chart-rangeslider .wj-rangeslider-rangehandle {
    background: gold;
    opacity: .20;
}
#FlexChart{
    height: 380px;
    width: 600px;
}
#Selector{
    height: 60px;
    width: 600px;
}

最初の項目はFlexChartクラスのheaderプロパティに設定した文字列をボールドで強調するためのもので、2つ目の項目は範囲セレクターの色を変更するためのものです。残りの2つの項目ではFlexChartコントロールのサイズを指定しています。

折れ線グラフを作成する

それでは「page1.html」と「page1.js」に次のようなコードを記述してFlexChartコントロールを作成しましょう。ここでは基本的な折れ線グラフを表示する方法を紹介します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>折れ線グラフ</title>
    <link href="css/wijmo.min.css" rel="stylesheet"/>
    <link href="css/styles.css" rel="stylesheet"/>
    <script src="scripts/wijmo.min.js"></script>
    <script src="scripts/wijmo.chart.min.js"></script>
    <script src="scripts/wijmo.chart.animation.min.js"></script>
    <script src="scripts/cultures/wijmo.culture.ja.min.js"></script>
    <script src="scripts/page1.js"></script>
    <script src="scripts/data.js"></script>
</head>
<body>
    <div id="FlexChart"></div>
</body>
</html>

document.addEventListener("DOMContentLoaded", function () {
    // 折れ線グラフの作成
    const chart = new wijmo.chart.FlexChart('#FlexChart', {
        header: '仙台の気温（2022年）',
        chartType: 'Line',
        itemsSource: getDataA(),
        bindingX: 'month',
        series: [{ binding: 'temp', name: '気温' }],
        legend: { position: wijmo.chart.Position.None },
        axisY: { title: '気温（℃）', min: 0, max: 30 }
    });

    // アニメーション動作の設定
    const ani = new wijmo.chart.animation.ChartAnimation(chart, {
        animationMode: wijmo.chart.animation.AnimationMode.All
    });
});

FlexChartクラスのコンストラクタ内で設定しているプロパティは、ここで紹介するすべてのチャートで使用しています。それぞれの機能を以下に示します。

プロパティ名	説明
header	チャートの標題を表す文字列
chartType	チャートのタイプ
itemsSource	チャートを作成するデータ
bindingX	X軸の値に対応するフィールド名
series	チャート系列（折れ線などを表します）
legend	チャートの凡例
axisY	既定のY軸（チャートの左側に表示）

Y軸の値に対応するフィールド名は、Seriesクラスのbindingプロパティに設定しています。「page1.js」の末尾では、ページがロードされる時のチャート表示にアニメーション効果を使うためにChartAnimationクラスを使っています。アニメーションの動作はChartAnimationクラスのanimationModeプロパティで指定します。

作成したページを表示すると次のようになります。

折れ線グラフにもう1つのY軸を追加する

次に先ほど作成した気温の折れ線グラフに湿度を表す折れ線グラフを追加します。その際に湿度の目盛を表示する2つめのY軸をチャートの右側に表示します。

このチャートを表示する「page2.html」と「page2.js」は次のようになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>2つのY軸</title>
    <link href="css/wijmo.min.css" rel="stylesheet"/>
    <link href="css/styles.css" rel="stylesheet"/>
    <script src="scripts/wijmo.min.js"></script>
    <script src="scripts/wijmo.chart.min.js"></script>
    <script src="scripts/wijmo.chart.animation.min.js"></script>
    <script src="scripts/cultures/wijmo.culture.ja.min.js"></script>
    <script src="scripts/page2.js"></script>
    <script src="scripts/data.js"></script>
</head>
<body>
    <div id="FlexChart"></div>
</body>
</html>

「page2.html」は、「page1.html」と比べてタイトルと参照するJavaScriptファイル（page2.js）のみ異なっています。

document.addEventListener("DOMContentLoaded", function () {
    // 2つのY軸を持つ折れ線グラフの作成
    const axisY2 = new wijmo.chart.Axis(wijmo.chart.Position.Right);
    axisY2.title = '湿度（％）';
    axisY2.min = 60;
    axisY2.max = 90;
    const chart = new wijmo.chart.FlexChart('#FlexChart', {
        header: '仙台の気温と湿度（2022年）',
        chartType: 'Line',
        itemsSource: getDataA(),
        bindingX: 'month',
        series: [
            { binding: 'temp', name: '気温' },
            { binding: 'rh', name: '湿度', chartType: 'LineSymbols', axisY: axisY2 }
        ],
        legend: { position: wijmo.chart.Position.Top },
        axisY: { title: '気温（℃）', min: 0, max: 30 }
    });

    // アニメーション動作の設定
    const ani = new wijmo.chart.animation.ChartAnimation(chart, {
        animationMode: wijmo.chart.animation.AnimationMode.All
    });
});

「page2.js」には湿度を表すSeriesを追加して、そのaxisYプロパティにAxisクラスのオブジェクトを設定することでチャートの右側にY軸を追加します。

チャートの種類を指定するchartTypeプロパティはFlexChartクラスとSeriesクラスの両方にありますが、SeriesクラスのchartTypeプロパティの設定が優先されます。この例では、FlexChartクラスのchartTypeプロパティにはLine（折れ線のみ）を設定し、湿度用のSeriesのchartTypeプロパティにはLineSymbols（折れ線とシンボル）を設定しています。

2つのY軸を持った折れ線グラフは次のように表示されます。

面グラフを作成する

面グラフは、折れ線の下の領域が色で塗りつぶされたグラフです。次の「page3.html」と「page3.js」を使って面グラフを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>面グラフ</title>
    <link href="css/wijmo.min.css" rel="stylesheet"/>
    <link href="css/styles.css" rel="stylesheet"/>
    <script src="scripts/wijmo.min.js"></script>
    <script src="scripts/wijmo.chart.min.js"></script>
    <script src="scripts/wijmo.chart.animation.min.js"></script>
    <script src="scripts/cultures/wijmo.culture.ja.min.js"></script>
    <script src="scripts/page3.js"></script>
    <script src="scripts/data.js"></script>
</head>
<body>
    <div id="FlexChart"></div>
</body>
</html>

「page3.html」は、「page1.html」と比べてタイトルと参照するJavaScriptファイル（page3.js）のみ異なっています。

document.addEventListener("DOMContentLoaded", function () {
    // 面グラフの作成
    const chart = new wijmo.chart.FlexChart('#FlexChart', {
        header: '仙台の気温（2023年1月と2月）',
        chartType: 'Area',
        itemsSource: getDataB(),
        bindingX: 'day',
        series: [
            { binding: 'temp1', name: '気温（1月）' },
            { binding: 'temp2', name: '気温（2月）' }
        ],
        legend: { position: wijmo.chart.Position.Top },
        axisY: { title: '気温（℃）', min: -5, max: 10 }
    });

    // アニメーション動作の設定
    const ani = new wijmo.chart.animation.ChartAnimation(chart, {
        animationMode: wijmo.chart.animation.AnimationMode.All
    });
});

「page3.js」では2つのSeriesを設定して、2023年1月と2月の日ごとの気温を表示します。また、itemsSource にgetDataBメソッドの戻り値を設定し、chartTypeはAreaにして面グラフにします。

ページを表示すると次のような面グラフになります。

面グラフに範囲セレクターを追加する

最後に、先ほど作成した面グラフに範囲セレクターを追加して、面グラフをX軸方向にスクロールできるようにします。範囲セレクターを追加した面グラフを表示する「page4.html」と「page4.js」は次のようになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>範囲セレクター</title>
    <link href="css/wijmo.min.css" rel="stylesheet"/>
    <link href="css/styles.css" rel="stylesheet"/>
    <script src="scripts/wijmo.min.js"></script>
    <script src="scripts/wijmo.chart.min.js"></script>
    <script src="scripts/wijmo.chart.animation.min.js"></script>
    <script src="scripts/wijmo.chart.interaction.min.js"></script>
    <script src="scripts/cultures/wijmo.culture.ja.min.js"></script>
    <script src="scripts/page4.js"></script>
    <script src="scripts/data.js"></script>
    </head>
<body>
    <div id="FlexChart"></div>
    <div id="Selector"></div>
</body>
</html>

「page4.html」は、「page1.html」と比べてタイトルと参照するJavaScriptファイル（page4.js）が異なっているのと、範囲セレクターなどのインタラクティブな機能を実現するために必要な「wijmo.chart.interaction.min.js」の参照を追加しています。
また、範囲セレクターをホストするための<div>要素も併せて追加しています。

document.addEventListener("DOMContentLoaded", function () {
    // 面グラフの作成
    const chart = new wijmo.chart.FlexChart('#FlexChart', {
        header: '仙台の気温（2023年1月と2月）',
        chartType: 'Area',
        itemsSource: getDataB(),
        bindingX: 'day',
        series: [
            { binding: 'temp1', name: '気温（1月）' },
            { binding: 'temp2', name: '気温（2月）' }
        ],
        legend: { position: wijmo.chart.Position.Top },
        axisY: { title: '気温（℃）', min: -5, max: 10 },
        plotMargin: 'NaN 20 40 90'
    });

    // アニメーション動作の設定
    const ani = new wijmo.chart.animation.ChartAnimation(chart, {
        animationMode: wijmo.chart.animation.AnimationMode.All
    });

    // 範囲セレクターの作成
    const selector = new wijmo.chart.FlexChart('#Selector', {
        chartType: 'Area',
        itemsSource: getDataB(),
        bindingX: 'day',
        series: [
            { binding: 'temp1', name: '気温（1月）' },
            { binding: 'temp2', name: '気温（2月）' }
        ],
        legend: { position: wijmo.chart.Position.None },
        tooltip: { content: '' },
        axisX: { axisLine: false, labels: false },
        axisY: { axisLine: false, labels: false },
        plotMargin: '0 20 0 90'
    });
    const rangeSelector = new wijmo.chart.interaction.RangeSelector(selector, {
        minScale: 0.05,
        maxScale: 1.0,
        rangeChanged: (sender) => {
            chart.axisX.min = sender.min;
            chart.axisX.max = sender.max;
        }
    });
});

「page4.js」では「範囲セレクターの作成」以外の箇所は「page3.js」とほとんど同じですが、チャートの描画領域（プロット領域）のサイズを間接的に指定するplotMarginプロパティを追加しています。chartとselectorのplotMarginプロパティでプロット領域の左右のマージンを同じにすることで、Y軸を表示したchartとY軸を表示していないselectorのプロット領域の幅を揃えています。

「範囲セレクターの作成」では、範囲セレクター用のFlexChartクラスのselectorオブジェクトとRangeSelectorクラスのオブジェクトを使います。RangeSelectorクラスのコンストラクタの引数にselectorを渡すことでselector上に範囲セレクターを表示できるようになります。範囲セレクターの作成方法については下記のヘルプとデモで詳しく解説しているのでご参照いただければと思います。

以下は、範囲セレクターを追加した面グラフです。

範囲セレクターを操作すると、chartのX軸方向の描画領域が次のように変化します。

今回ご紹介した各種設定は以下のデモアプリケーションでも確認できます（“Run Project”をクリックするとデモが起動します）。

FlexChartコントロールの利用については以下のドキュメントも用意していますので、ここで紹介できなかった機能については、これらのドキュメントを参照していただければと思います。

ヘルプ
https://demo.grapecity.com/wijmo/docs/Topics/Chart/Basic/Chart-Elements
APIリファレンス
https://demo.grapecity.com/wijmo/api/modules/wijmo_chart.html
デモ
https://demo.grapecity.com/wijmo/demos/Chart/Overview/purejs

さいごに

今回はWijmoに含まれているFlexChartコントロールの基本的な使用方法を紹介いたしました。FlexChartは、この他にも業務アプリケーションに求められるさまざまなチャートを作成する多くの機能を備えています。アプリケーションでのデータ表示の一助として、FlexChartをご検討いただけますと幸いです。

この他にもWijmoの各種コントロールの基本的な使い方や応用的な使い方の解説を連載記事として公開しています。こちらも是非ご覧ください。

製品サイトでは、Wijmoの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼この記事をシェアする／