Wijmo UI for the Web
書式文字列
| Wijmo ユーザーガイド > 概念 > 書式文字列 |
多くのウィジェットには、表示する数値や日付の書式設定に使用される書式文字列を指定するオプションがあります。ほとんどの書式文字列は、.NET で使用されている書式に準拠します。たとえば、次のようになります。
'n2' ３桁区切りを含む小数点以下２桁の数値
'c0' 通貨記号と３桁区切りを含む、小数点以下０桁の数値
'p0' 小数点以下０桁のパーセント
'd' 短い日付
'D' 長い日付
次のサンプルコードは、wijbarchart で書式文字列を使用します。下線の引かれたコード部分に注目してください。
| Format Numeric Values Script |
コードのコピー |
|---|---|
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#wijbarchart").wijbarchart({
axis:{
y:{annoFormatString:"p0"}
},
chartLabelFormatString: "p0",
hint:{
content: function(){
return this.data.label + '\n ' + Globalize.format(this.y, "p0") + '';
}
},
seriesList: [{
label: "2012 Auto Sales",
legendEntry: true,
data: {
x: ['Ford', 'GM', 'Chrysler', 'Toyota', 'Nissan', 'Honda'],
y: [.05, .04, .21, .27, .1, .24]
}
}],
});
});
</script>
| |
ほとんどの場合、書式が具体的にどのように適用されるかは、カルチャの設定に基づきます。これはサーバーのカルチャであるか、または ローカライズとグローバライズを使用して指定したカルチャです。以下の例では、カルチャ設定が「en-US」である場合を想定しています。
| 書式設定文字（大文字／小文字を区別しない） | 説明 | サンプルコード | 結果 |
|---|---|---|---|
| c | カルチャのデフォルトの 3 桁区切り記号および小数点以下桁数による通貨書式を適用します。小数点以下桁数を独自に指定することもできます。 | dataFormatString: "c" dataFormatString: "c3" |
$12.34 $1.234 |
| d | 10 進数の書式を整数に適用します。デフォルトでは、先行ゼロを付けない最小桁数が使用されますが、精度を指定して先行ゼロを追加することもできます。 | chartLabelFormatString: "d" chartLabelFormatString: "d5" |
1234 01234 |
| e | 指数（e）表記の書式を数値に適用します。デフォルトの小数部桁数は 6 桁ですが、小数部の桁数を独自に指定することもできます。 | formatString: "e" formatString: "e2" |
1.052033E+003 1.05e+003 |
| f | 3 桁区切りを使用しない固定書式を数値に適用します。デフォルトの小数部桁数は 2 桁ですが、小数部桁数を指定して端数処理することもできます。 | formatString: "f" formatString: "f3" |
1234.57 1234.567 |
| g | 一般的な書式を数値（固定表記、きわめて大きな数値、指数表記）に適用します。端数処理する有効桁数を指定できます。 | formatString: "g" formatString: "g2" |
123.456 120 |
| n | デフォルトの 3 桁区切り記号による書式を適用し、小数部 2 桁で端数処理します。小数部桁数を独自に指定することもできます。 | dataFormatString: "n" dataFormatString: "n4" |
1,234.57 1.234.5670 |
| p | パーセント書式を数値に適用します。デフォルトの小数部桁数は 2 桁ですが、小数部の桁数を独自に指定することもできます。 | titleFormat: "p" titleFormat: "p0" |
100.00% 100% |
| r | Single、Double、BigInteger 値にラウンドトリップ書式を適用し、文字列に変換した数値が、解析の結果同じ数値に戻るようにします。 | annoFormatString: "r" | 3.1415926535897931 |
| x | 指定した書式文字が大文字であるか小文字であるかに応じて、大文字または小文字を使用して、16 進数書式を整数値に適用します。表示桁数を指定することもできます。 | formatString: "X" formatString: "x4: |
7B 007b |
| 書式設定文字（大文字／小文字を区別） | 説明 | サンプルコード | 結果 |
|---|---|---|---|
| d | 短い日付書式を適用します。 | formatString: "d" | 7/14/2014 |
| D | 長い日付書式を適用します。 | formatString: "D" | Monday, July 14, 2014 |
| f | 完全な日付と短い時刻の書式を適用します。 | formatString: "f" | Monday, July 14, 2014 1:45 PM |
| F | 完全な日付と長い時刻の書式を適用します。 | formatString: "F" | Monday, July 14, 2014 1:45:30 PM |
| g | >一般的な日付と短い時刻の書式を適用します。 | formatString: "g" | 7/14/2014 1:45 PM |
| G | 一般的な日付と長い時刻の書式を適用します。 | formatString: "G" | 7/14/2014 1:45:30 PM |
| M または m | 月日の書式を適用します。 | formatString: "M" | July 14 |
| O または o | ラウンドトリップの日時書式を適用して、文字列に変換された日付値が、解析の結果同じ日付に戻るようにします。 | formatString: "O" | 2014-07-14T13:45:30.0900000 |
| R または r | RFC1123 書式を適用します。詳細については、 MSDN DateTimeFormatInfo RFC1123を参照してください。 | formatString: "R" | Mon, 14 Jul 2014 20:45:30 GMT |
| s | 並べ替え可能な日時書式を適用します。 | formatString: "s" | 2014-07-14T13:45:30 |
| t | 短い時刻の書式を適用します。 | formatString: "t" | 1:45 PM |
| T | 長い時刻の書式を適用します。 | formatString: "T" | 1:45:30 PM |
| u | 並べ替え可能な世界共通の日時書式を適用します。 | formatString: "u" | 2014-07-14 13:45:30Z |
| U | 世界共通の完全な日付と長い時刻の書式を適用します。 | formatString: "U" | Monday, July 14, 2014 1:45:30 PM |
| Y または y | 年月の書式を適用します。 | formatString: "Y" formatString: "y" |
July, 2014 |
Wijmo では、jQuery globalize を使用して数値と日付を書式設定します。jQuery globalize の詳細については、以下を参照してください。
http://www.ibm.com/developerworks/opensource/library/os-jquerynewpart1/index.html
http://weblogs.asp.net/scottgu/archive/2010/06/10/jquery-globalization-plugin-from-microsoft.aspx