折れ線チャート折れ線チャートレンダリングの入力として使用されるJSONは、複数の要素で構成されています。 基本的な構造| Code Block |
|---|
{
"x_axis": {
"labels": [ ... ]
}
"y_axis": {
"labels": {
"labels": [ ... ]
}
}
"elements": [
{
"type": "line",
"values": [ ... ]
]
} |
共通の要素| 名 | 説明 | 例 |
|---|
chartId | チャートビュー識別子。 RESTAPIをご参照してください。 | chart_253-GZ9Q6t1MQt_rh7u3tAX91 | bg_color | チャート全体の背景の色を定義します | #e5e5e5 | is_decimal_separator_comma | 小数点記号としてカンマを使用/非使用を決定します。 [0, 1] | 1 | is_thousand_separator_disabled | 桁区切りを使用/非使用を決定します。 [0, 1] | 1 | tooltip | チャートの全体に基本的なツールチップの設定を定義します。 | 名 | 説明 | 例 |
|---|
mouse | マウス感度 | 2 | shadow | [true, false] | true | stroke | [0, 1] | 1 | colour | ツールチップのの色フォントデフォルト | #202020 | background | ツールチップの背景デフォルト | "#ffffff" |
| |
|
|
例 | Code Block |
|---|
{
"chartId": "chart_253-GZ9Q6t1MQt_rh7u3tAX91",
"bg_colour": "#e5e5e5",
"is_decimal_separator_comma": 1,
"is_thousand_separator_disabled": 1,
"tooltip": {
"mouse": "2",
"shadow": true,
"stroke": 1,
"colour": "#202020",
"background": "#ffffff"
},
"options": {}
} |
「x_axis」コンテンツ| 名 | 説明 | 例 |
|---|
colour | 軸ラベルの色 | #c7c7c7 | grid-colour | x-軸グリッドの色（水平方向） | #c7c7c7 | steps | x軸に表示される要素の数 | 5 | labels | 軸ラベルを定義するネストされたオブジェクト | 名 | 説明 | 例 |
|---|
colour | ラベルの色 | #4e4e4e | labels | 表示用ラベルの配列 | [ "2009", "2010", "2011", "2012" ] |
|
|
例 | Code Block |
|---|
"x_axis": {
"colour": "#c7c7c7",
"grid-colour": "#c7c7c7",
"steps": 0,
"labels": {
"colour": "#4e4e4e",
"labels": [ "2009", "2010", "2011", "2012" ]
}
}, |
「y_axis」コンテンツY軸は、最小値と最大値、一つのステップのサイズ（ステップ）とラベルによって定義されています。各ラベルは、Y軸（y）上の値が含まれて、テキストを表示しました。また、Y軸に色と色グリッドを指定できます。 | 名 | 説明 | 例 |
|---|
colour | 軸ラベルの色 | #c7c7c7 | grid-colour | y軸グリッドの色（垂直） | #c7c7c7 | steps | 軸ステップサイズ | 10 | min | 軸上に表示した最小値 | 0 | max | 軸上に表示した最大値 | 20000 | labels | 軸ラベルを定義するネストされたオブジェクト | 名 | 説明 | 例 |
|---|
colour | ラベルの色 | #4e4e4e | labels | ラベルと値の配列 | [ { "text": "12.500 km", "y": 12500 }, { "text": "15.000 km", "y": 15000 } ] |
| |
例 | Code Block |
|---|
"y_axis": {
"colour": "#c7c7c7",
"grid-colour": "#c7c7c7",
"steps": 2500,
"min": 12500,
"max": 30000,
"labels": {
"colour": "#4e4e4e",
"labels": [
{ "text": "12.500 km", "y": 12500 },
{ "text": "15.000 km", "y": 15000 },
{ "text": "17.500 km", "y": 17500 },
{ "text": "20.000 km", "y": 20000 },
{ "text": "22.500 km", "y": 22500 },
{ "text": "25.000 km", "y": 25000 },
{ "text": "27.500 km", "y": 27500 },
{ "text": "30.000 km", "y": 30000 }
]
}
} |
「要素」コンテンツ配列要素に各オブジェクトは、1つのチャート要素を記述する。上の例で、4つの値を持つ配列を含んでいる及びグレードタイトルがある要素を持っている。各値オブジェクトはラベル、ツールチップ、値、コンテストを構成されている。カラーとドットスタイルは、この線要素の最後に指定されている。 配列要素内の各オブジェクトは、1つのチャート要素を記述します。上記の例では、線タイプ を持つGradeタイトルを持つ要素が1つしかなく、4の値を持つ配列が含まれています。各値オブジェクトは、ラベル、ツールチップ、値、コンテキストとハイライトで構成されています。カラーとドットスタイルがこの線要素の終わりに指定されます。 | 名 | 説明 | 例 |
|---|
type | チャートのタイプ。折れ線チャートの場合、値は「行」とします | line | text | チャート名 | |
| font-size | テキストを表示するために使用されるフォントのサイズ |
| colour | 表示したテキストに使用されるカラー |
| dot-style | ドットのスタイル | 名 | 説明 | 例 |
|---|
dot-size | ドットサイズ | 6 | halo-size | ハローサイズ | 10 | type | ドットタイプ - サポートされている値の一つ：「スター」、「ドット」、「ソリッド・ドット」、「ボックス」、「アンカー」 | star |
|
| values |
| 名 | 説明 | 例 |
|---|
value | 表示用数値 | 12345.4567 | tip | マウスホバーで表示するツールチップのテキスト | これは、ツールチップである | label | 値ラベルがドットで表示（オプション） | これはラベルです | context | 定義されている場合、コンテキストがイベントパラメータとしてクライアントに送信されます | |
| |
|
|
| Code Block |
|---|
"elements": [
{
"type": "line",
"text": "Grade",
"font-size": 10,
"colour": "#19527d",
"dot-style": {
"dot-size": 5,
"halo-size": 2,
"type": "star"
}
"values": [
{
"value": 15183.327668348653,
"tip": "Year 2009<br>15.183,32 km",
"label": "15.183 km",
"context": "{\"identifierQuery\":\"\",\"dateInterval\":{\"to\":\"2009-12-31\",\"from\":\"2009-01-01\",\"period\":\"YEAR\"},\"dataLink\":\"fE1fR1JBREV8MjAwOTAxMDF8WXx8fHwyMDA5MDEwMXwyMDA5MTIzMXx8\"}"
},
{
"value": 27971.228181842624,
"tip": "Year 2010<br>27.971,22 km",
"label": "27.971 km",
"context": "{\"identifierQuery\":\"\",\"dateInterval\":{\"to\":\"2010-12-31\",\"from\":\"2010-01-01\",\"period\":\"YEAR\"},\"dataLink\":\"fE1fR1JBREV8MjAxMDAxMDF8WXx8fHwyMDEwMDEwMXwyMDEwMTIzMXx8\"}"
},
{
"value": 28280.286460244166,
"tip": "Year 2011<br>28.280,28 km",
"label": "28.280 km",
"context": "{\"identifierQuery\":\"\",\"dateInterval\":{\"to\":\"2011-12-31\",\"from\":\"2011-01-01\",\"period\":\"YEAR\"},\"dataLink\":\"fE1fR1JBREV8MjAxMTAxMDF8WXx8fHwyMDExMDEwMXwyMDExMTIzMXx8\"}"
},
{
"value": 13140.62901215068,
"tip": "Year 2012<br>13.140,62 km",
"label": "13.140 km",
"context": "{\"identifierQuery\":\"\",\"dateInterval\":{\"to\":\"2012-12-31\",\"from\":\"2012-01-01\",\"period\":\"YEAR\"},\"dataLink\":\"fE1fR1JBREV8MjAxMjAxMDF8WXx8fHwyMDEyMDEwMXwyMDEyMTIzMXx8\"}"
}
]
}
] |
例えば | Attachments |
|---|
| upload | false |
|---|
| old | false |
|---|
| sortBy | name |
|---|
|
|