Wijmo UI for the Web
すべての数値の書式設定

クイックスタートの例に機能を追加して、軸ラベル、チャートラベル、ツールチップの数値の書式設定を変更できます。

  1. HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを以下のスクリプトに置き換えます。このスクリプトは次の操作を実行します。
    • それぞれ特殊な書式設定を使用するように次のラベルを設定します。
      • X 軸のラベルは CO(小数点以下なしの通貨)を使用します。
      • チャート内の各バブルのラベル(chartLabelFormatString)は、p0 書式設定(小数点以下なしのパーセンテージ)を使用します。
      • バブルの上にマウスポインタが置かれたときに表示する hint オプション内のデータラベルには、p0 書式設定を使用して Y1 値をseriesListラベルとともにツールチップ内に表示します。(そうでない場合、ヒントには Y1 ではなく Y の値が表示されます。)
    • バブルのラベルが見やすいように、chartLabelStyle オプションを白に変更します。
    • X 軸のラベルが密集しないように、凡例を非表示にします。
    • 次のプロパティを持つ系列を作成します。
      • ツールチップで使用されるラベルは "Company X Market Share"。
      • Y 軸には各会社の製品数を表示します。
      • X 軸には各会社の売上を表示します。
      • Y1 値は、市場シェアに基づいて各企業のバブルのサイズを設定します。

    ドロップダウンからコードを貼り付けます

  2. HTML ファイルの <body> セクションを変更する必要はありません。チャートを表示するには、基本的な <div> タグで十分です。
  3. HTML ファイルを保存し、ブラウザで開きます。チャートは次の図のようになり、すべての数値データが書式設定されて、パーセンテージまたは通貨として表示されます。

関連トピック

参照

 

 


Copyright © GrapeCity inc. All rights reserved.