WijmoのFlexChartのテキスト要素をHTMLタグでカスタマイズする

JavaScriptUIライブラリ「Wijmo(ウィジモ)」のチャートコントロール「FlexChart(フレックスチャート)」では、ラベルや凡例といった各種テキスト要素にHTMLタグを使用して視覚要素や書式を設定できます。

FlexChartのテキスト要素をHTMLタグでカスタマイズ

本記事では、FlexChartの各テキスト要素にHTMLタグを設定してカスタマイズする方法について解説します。

開発環境の準備

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

今回作成するファイルは次の4つです。

index.htmlページ本体。ページの要素としてFlexChartコントロールを配置します
app.jsFlexChartコントロールを作成するコードを記載します
data.jsFlexChartコントロールに連結するデータを記載します
styles.css各種ページ要素のスタイル定義を記載します

Wijmoの参照設定

FlexChartコントロールの機能を使うために必要となるWijmoのモジュールなどへの参照設定は「index.html」で行います。また、FlexChartコントロールの各種設定を記載する「app.js」とデータを記載する「data.js」の参照もここに追加します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>FlexChartコントロールのテキスト要素でHTMLタグを使う</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/app.js"></script>
    <script src="scripts/data.js"></script>
    <script></script>
</head>
<body>
    <div id="FlexChart"></div>
</body>
</html>

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

#FlexChart {
    height: 600px;
    width: 800px;
}

FlexChartにデータをバインドする

それでは「app.js」と「data.js」に次のようなコードを記述し、FlexChartコントロールでデータバインドしてデータを表示させます。
※ ライセンスキーを設定しない場合トライアル版を示すメッセージが表示されます。ライセンスキーの入手や設定方法についてはこちらをご覧ください。

// wijmo.setLicenseKey('ここにWijmoのライセンスキーを設定します');

// FlexChartコントロール
let flexChart = null;

// FlexChartコントロールの初期化
document.addEventListener("DOMContentLoaded", function () {
    // データの取得
    const data = getData();
    const data1 = data.filter(item => item.year == '1950');
    const data2 = data.filter(item => item.year == '2023');

    // 折れ線グラフの設定
    flexChart = new wijmo.chart.FlexChart('#FlexChart', {
        itemsSource: data,
        header: '仙台の気温(1950年/2023年)',
        footer: 'ここにフッタが表示されます',
        legend: { position: 'Top' },
        chartType: 'Line',
        bindingX: 'month',
        series: [
            {
                itemsSource: data1,
                binding: 'temp',
                name: '1950年',
                style: { stroke: 'blue', strokeWidth: 3 },
            },
            {
                itemsSource: data2,
                binding: 'temp',
                name: '2023年',
                style: { stroke: 'red', strokeWidth: 3 },
            }
        ],
        axisY: {
            title: '気温[℃]',
            min: 0,
            max: 35
        }
    });

    // アニメーション動作の設定
    const ani = new wijmo.chart.animation.ChartAnimation(flexChart, {
        animationMode: wijmo.chart.animation.AnimationMode.All
    });
});
// 1950年および2023年
// 仙台(宮城県) 日平均気温の月平均値(℃)
// 仙台(宮城県) 相対湿度の月平均値(%)
function getData() {
    return[
        {year: '1950', month: '1月', temp: 1.2, rh: 72},
        {year: '1950', month: '2月', temp: 0.9, rh: 70},
        {year: '1950', month: '3月', temp: 3.7, rh: 65},
        {year: '1950', month: '4月', temp: 9.8, rh: 74},
        {year: '1950', month: '5月', temp: 15.7, rh: 76},
        {year: '1950', month: '6月', temp: 18.7, rh: 86},
        {year: '1950', month: '7月', temp: 24.6, rh: 83},
        {year: '1950', month: '8月', temp: 24.6, rh: 88},
        {year: '1950', month: '9月', temp: 21.3, rh: 84},
        {year: '1950', month: '10月', temp: 12.9, rh: 76},
        {year: '1950', month: '11月', temp: 8.4, rh: 76},
        {year: '1950', month: '12月', temp: 2.8, rh: 72},
        {year: '2023', month: '1月', temp: 2.1, rh: 68},
        {year: '2023', month: '2月', temp: 3.0, rh: 65},
        {year: '2023', month: '3月', temp: 9.3, rh: 64},
        {year: '2023', month: '4月', temp: 13.3, rh: 59},
        {year: '2023', month: '5月', temp: 16.6, rh: 68},
        {year: '2023', month: '6月', temp: 21.6, rh: 78},
        {year: '2023', month: '7月', temp: 26.6, rh: 77},
        {year: '2023', month: '8月', temp: 28.6, rh: 80},
        {year: '2023', month: '9月', temp: 25.1, rh: 81},
        {year: '2023', month: '10月', temp: 16.7, rh: 69},
        {year: '2023', month: '11月', temp: 11.4, rh: 70},
        {year: '2023', month: '12月', temp: 5.7, rh: 69}
    ];
}

これでFlexChartコントロールの生成とデータの連結ができました。Visual Studio Code上で「index.html」を右クリックし、「Open with Live Server」のメニューを実行し、開発サーバーでアプリケーションを実行します。

Live Serverで実行

実行後、ブラウザ上にFlexChartが表示されます。

FlexChartの表示

テキスト要素にHTMLタグを設定する

FlexChartコントロールのヘッダ、フッタ、凡例、軸タイトル、軸ラベル、ツールチップなどのテキスト要素でHTMLタグを利用するには、FlexChartクラスのoptions.htmlTextプロパティをtrueに設定しておく必要があります。

・・・(中略)・・・
// 折れ線グラフの設定
flexChart = new wijmo.chart.FlexChart('#FlexChart', {
    ・・・(中略)・・・
    options: { htmlText: true },
    ・・・(中略)・・・
});
・・・(中略)・・・

次のテキスト要素にHTMLタグを設定すると、FlexChartコントロールは以下のようになります。

  • ヘッダ
  • フッタ
  • 凡例
  • 軸タイトル
  • 軸ラベル
テキスト要素をカスタマイズ

修正後の「app.js」、および「data.js」のコードは以下のようになります。

// wijmo.setLicenseKey('ここにWijmoのライセンスキーを設定します');

// FlexChartコントロール
let flexChart = null;

// ヘッダ文字列
const header1 =
    '<div class="chart-header"><u>仙台の気温(1950年/2023年)</u></div>';
const header2 =
    '<div class="chart-header"><u>仙台の湿度(1950年/2023年)</u></div>';

// フッタ文字列
const footer1 =
    '<div class="chart-footer">' +
    '<label><input type="radio" id="temp" checked="true" onclick="setTemp();">気温</label>' +
    '<label><input type="radio" id="rh" onclick="setRh();">湿度</label>' +
    '</div>';
const footer2 =
    '<div class="chart-footer">' +
    '<label><input type="radio" id="temp" onclick="setTemp();">気温</label>' +
    '<label><input type="radio" id="rh" checked="true" onclick="setRh();">湿度</label>' +
    '</div>';

// Y軸の設定値
const title1 = '<span style="font-size:120%;">気温[℃]</span>';
const min1 = 0;
const max1 = 35;
const title2 = '<span style="font-size:120%;">湿度[%]</span>';
const min2 = 55;
const max2 = 90;

// FlexChartコントロールの初期化
document.addEventListener("DOMContentLoaded", function () {
    // データの取得
    const data = getData();
    const data1 = data.filter(item => item.year == '1950');
    const data2 = data.filter(item => item.year == '2023');

    // 折れ線グラフの設定
    flexChart = new wijmo.chart.FlexChart('#FlexChart', {
        itemsSource: data,
        header: header1,
        footer: footer1,
        options: { htmlText: true },
        legend: { position: 'Top' },
        chartType: 'Line',
        bindingX: 'month',
        series: [
            {
                itemsSource: data1,
                binding: 'temp',
                name: '<span style="color:blue;">1950年</span>',
                style: { stroke: 'blue', strokeWidth: 3 },
            },
            {
                itemsSource: data2,
                binding: 'temp',
                name: '<span style="color:red;">2023年</span>',
                style: { stroke: 'red', strokeWidth: 3 },
            }
        ],
        tooltip: {content: "{seriesName}<br>{month}<br>値:<b>{y}</b>"},
        axisY: {
            title: title1,
            min: min1,
            max: max1
        }
    });

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

// 気温の折れ線グラフ
function setTemp() {
    flexChart.header = header1;
    flexChart.footer = footer1;
    flexChart.axisY.title = title1;
    flexChart.axisY.min = min1;
    flexChart.axisY.max = max1;
    flexChart.series[0].binding = 'temp';
    flexChart.series[1].binding = 'temp';
}

// 湿度の折れ線グラフ
function setRh() {
    flexChart.header = header2;
    flexChart.footer = footer2;
    flexChart.axisY.title = title2;
    flexChart.axisY.min = min2;
    flexChart.axisY.max = max2;
    flexChart.series[0].binding = 'rh';
    flexChart.series[1].binding = 'rh';
}
// 1950年および2023年
// 仙台(宮城県) 日平均気温の月平均値(℃)
// 仙台(宮城県) 相対湿度の月平均値(%)
function getData() {
    return[
        {year: '1950', month: '<b>1</b>月', temp: 1.2, rh: 72},
        {year: '1950', month: '<b>2</b>月', temp: 0.9, rh: 70},
        {year: '1950', month: '<b>3</b>月', temp: 3.7, rh: 65},
        {year: '1950', month: '<b>4</b>月', temp: 9.8, rh: 74},
        {year: '1950', month: '<b>5</b>月', temp: 15.7, rh: 76},
        {year: '1950', month: '<b>6</b>月', temp: 18.7, rh: 86},
        {year: '1950', month: '<b>7</b>月', temp: 24.6, rh: 83},
        {year: '1950', month: '<b>8</b>月', temp: 24.6, rh: 88},
        {year: '1950', month: '<b>9</b>月', temp: 21.3, rh: 84},
        {year: '1950', month: '<b>10</b>月', temp: 12.9, rh: 76},
        {year: '1950', month: '<b>11</b>月', temp: 8.4, rh: 76},
        {year: '1950', month: '<b>12</b>月', temp: 2.8, rh: 72},
        {year: '2023', month: '<b>1</b>月', temp: 2.1, rh: 68},
        {year: '2023', month: '<b>2</b>月', temp: 3.0, rh: 65},
        {year: '2023', month: '<b>3</b>月', temp: 9.3, rh: 64},
        {year: '2023', month: '<b>4</b>月', temp: 13.3, rh: 59},
        {year: '2023', month: '<b>5</b>月', temp: 16.6, rh: 68},
        {year: '2023', month: '<b>6</b>月', temp: 21.6, rh: 78},
        {year: '2023', month: '<b>7</b>月', temp: 26.6, rh: 77},
        {year: '2023', month: '<b>8</b>月', temp: 28.6, rh: 80},
        {year: '2023', month: '<b>9</b>月', temp: 25.1, rh: 81},
        {year: '2023', month: '<b>10</b>月', temp: 16.7, rh: 69},
        {year: '2023', month: '<b>11</b>月', temp: 11.4, rh: 70},
        {year: '2023', month: '<b>12</b>月', temp: 5.7, rh: 69}
    ];
}

また、「styles.css」に以下のスタイルを追加します。

・・・(中略)・・・
.chart-header, .chart-footer {
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    justify-content: center;
}

それぞれのテキスト要素に設定したHTMLタグについて以下で解説します。

ヘッダ

FlexChartコントロールのheaderプロパティには、<div>タグと<u>タグを設定します。<u>タグによりヘッダ文字列に下線を設定します。また、<div>タグで指定したCSSクラスによりヘッダ文字列の上下のマージンを設定し、FlexChartコントロールの中央(水平方向)に配置します。

・・・(中略)・・・
// ヘッダ文字列
const header1 =
    '<div class="chart-header"><u>仙台の気温(1950年/2023年)</u></div>';

// 折れ線グラフの設定
flexChart = new wijmo.chart.FlexChart('#FlexChart', {
    ・・・(中略)・・・
    header: header1,
    ・・・(中略)・・・
});
・・・(中略)・・・

フッタ

footerプロパティでは、<div>タグと<label>タグ、および<input>タグを設定します。<label>タグと<input>タグを使ってラジオボタンを作成し、<div>タグでCSSクラスを指定し、上下のマージンと水平方向の中央配置を設定します。

また、各ラジオボタンがクリックされたときにsetTemp関数(気温チャート)またはsetRh関数(湿度チャート)を呼び出して、チャートに表示するデータと設定の切り替え(気温/湿度)ができるようにします。

・・・(中略)・・・

// フッタ文字列
const footer1 =
    '<div class="chart-footer">' +
    '<label><input type="radio" id="temp" checked="true" onclick="setTemp();">気温</label>' +
    '<label><input type="radio" id="rh" onclick="setRh();">湿度</label>' +
    '</div>';
const footer2 =
    '<div class="chart-footer">' +
    '<label><input type="radio" id="temp" onclick="setTemp();">気温</label>' +
    '<label><input type="radio" id="rh" checked="true" onclick="setRh();">湿度</label>' +
    '</div>';

・・・(中略)・・・

// 折れ線グラフの設定
flexChart = new wijmo.chart.FlexChart('#FlexChart', {
    ・・・(中略)・・・
    footer: footer1,
    ・・・(中略)・・・
});

// 気温の折れ線グラフ
function setTemp() {
    flexChart.header = header1;
    flexChart.footer = footer1;
    flexChart.axisY.title = title1;
    flexChart.axisY.min = min1;
    flexChart.axisY.max = max1;
    flexChart.series[0].binding = 'temp';
    flexChart.series[1].binding = 'temp';
}

// 湿度の折れ線グラフ
function setRh() {
    flexChart.header = header2;
    flexChart.footer = footer2;
    flexChart.axisY.title = title2;
    flexChart.axisY.min = min2;
    flexChart.axisY.max = max2;
    flexChart.series[0].binding = 'rh';
    flexChart.series[1].binding = 'rh';
}

凡例

凡例には、各seriesのnameプロパティに設定したHTMLタグが反映されます。また、この設定内容はツールチップにも反映されます。

ここでは、seriesのnameプロパティに<span>タグのstyle属性で凡例とツールチップの文字色を変更します。

// 折れ線グラフの設定
flexChart = new wijmo.chart.FlexChart('#FlexChart', {
    ・・・(中略)・・・
options: { htmlText: true },
    legend: { position: 'Top' },
    series: [
        {
            itemsSource: data1,
            binding: 'temp',
            name: '<span style="color:blue;">1950年</span>',
            style: { stroke: 'blue', strokeWidth: 3 },
        },
        {
            itemsSource: data2,
            binding: 'temp',
            name: '<span style="color:red;">2023年</span>',
            style: { stroke: 'red', strokeWidth: 3 },
        }
    ],
    ・・・(中略)・・・
});



軸タイトル

ここではY軸のタイトルにHTMLタグを設定します。具体的にはaxisY.titleプロパティに<span>タグを設定し、style属性でフォントサイズを120%に拡大します。

// Y軸の設定値
const title1 = '<span style="font-size:120%;">気温[℃]</span>';
const min1 = 0;
const max1 = 35;

// 折れ線グラフの設定
flexChart = new wijmo.chart.FlexChart('#FlexChart', {
    ・・・(中略)・・・
options: { htmlText: true },
    axisY: {
        title: title1,
        min: min1,
        max: max1
    }
    ・・・(中略)・・・
});

軸ラベル

軸ラベルには、FlexChartクラスのbindingXプロパティで指定したフィールドのデータに設定したHTMLタグが反映されます。

ここでは、連結するデータのmonthフィールドに<b>タグを設定します。また、<b>タグで太字に設定するのは、Monthフィールドの文字列全体ではなく月を表す数字の部分だけにしています。

// 1950年および2023年
// 仙台(宮城県) 日平均気温の月平均値(℃)
// 仙台(宮城県) 相対湿度の月平均値(%)
function getData() {
    return[
        {year: '1950', month: '<b>1</b>月', temp: 1.2, rh: 72},
        {year: '1950', month: '<b>2</b>月', temp: 0.9, rh: 70},
        {year: '1950', month: '<b>3</b>月', temp: 3.7, rh: 65},
        {year: '1950', month: '<b>4</b>月', temp: 9.8, rh: 74},
        {year: '1950', month: '<b>5</b>月', temp: 15.7, rh: 76},
        {year: '1950', month: '<b>6</b>月', temp: 18.7, rh: 86},
        {year: '1950', month: '<b>7</b>月', temp: 24.6, rh: 83},
        {year: '1950', month: '<b>8</b>月', temp: 24.6, rh: 88},
        {year: '1950', month: '<b>9</b>月', temp: 21.3, rh: 84},
        {year: '1950', month: '<b>10</b>月', temp: 12.9, rh: 76},
        {year: '1950', month: '<b>11</b>月', temp: 8.4, rh: 76},
        {year: '1950', month: '<b>12</b>月', temp: 2.8, rh: 72},
        {year: '2023', month: '<b>1</b>月', temp: 2.1, rh: 68},
        {year: '2023', month: '<b>2</b>月', temp: 3.0, rh: 65},
        {year: '2023', month: '<b>3</b>月', temp: 9.3, rh: 64},
        {year: '2023', month: '<b>4</b>月', temp: 13.3, rh: 59},
        {year: '2023', month: '<b>5</b>月', temp: 16.6, rh: 68},
        {year: '2023', month: '<b>6</b>月', temp: 21.6, rh: 78},
        {year: '2023', month: '<b>7</b>月', temp: 26.6, rh: 77},
        {year: '2023', month: '<b>8</b>月', temp: 28.6, rh: 80},
        {year: '2023', month: '<b>9</b>月', temp: 25.1, rh: 81},
        {year: '2023', month: '<b>10</b>月', temp: 16.7, rh: 69},
        {year: '2023', month: '<b>11</b>月', temp: 11.4, rh: 70},
        {year: '2023', month: '<b>12</b>月', temp: 5.7, rh: 69}
    ];
}

ツールチップ

ツールチップでは、tooltip.contentプロパティにHTMLタグを設定できます。今回は<br>タグを使って各要素を改行し、<b>タグでY値を太字に設定しています。また、seriesNameとして表示される文字列には、前述の凡例のところで述べたように、series.nameプロパティに設定したHTMLタグが反映されます

// 折れ線グラフの設定
flexChart = new wijmo.chart.FlexChart('#FlexChart', {
    ・・・(中略)・・・
    tooltip: {content: "{seriesName}<br>{month}<br>値:<b>{y}</b>"},
    ・・・(中略)・・・
});

上記のHTMLタグを設定するとツールチップが以下のようになります。

ツールチップのカスタマイズ

次の動画は、以上の実装後に起動したアプリでフッタに設定したラジオボタンをクリックしたときの様子をキャプチャしたものです。ラジオボタンをクリックすると、チャートの内容が「気温」から「湿度」、またはその逆に切り替わるのが分かります。

今回ご紹介したFlexChartのHTMLタグ機能は以下のデモアプリケーションでも確認できます(“Run Project”をクリックするとデモが起動します)。アプリケーションの全容については、こちらのデモアプリケーションでご確認ください。

さいごに

今回はWijmoのFlexChartコントロールでヘッダや凡例などのテキスト要素にHTMLタグを使用する方法をご紹介いたしました。

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

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

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

\  この記事をシェアする  /