★Flexible Common – Chart

概要

例えば、データを年度推移でチャート化してユーザーへ伝えたいメッセージを視覚的に表すことが出来ます。

チャートの種類は、BarとLine、円の3種類があり、各データは2種類の10個まで設定が出来ます。またデータ色の設定も手動と自動のどちらかを選択することが出来ます。

使用例

使用方法

• 編集ページ の「Flexible Commmon」から[Add Section]から使用するテンプレートを選択して下さい。
• レイアウトの設定はローカルとグローバルでの設定になります

テンプレート

• 3col ChartBox A、3col Editor | Chart1 | Chart2 A、
• 2col ChartBox A、2col Chart | Editor A、2col Editor | Chart A,
• 1col Chart A

設定

1. 内容
   • ローカル
     1. Title Height：タイトルの高さ設定
     2. Editor Column Height：エディターエリアの高さ設定
     3. Chart Height For PC/Mobile：チャートエリアの高さ設定
     4. Title Col Underline Color：タイトルのアンダーライン色
     5. Editor Bgcolor/Boder color：テキストの背景・枠線色
     6. Chart Bgcolor/Boder color：チャートの背景・枠線色
     7. Chart Type：チャートのスタイルとデータ値の色設定（BAR-Random Colors,BAR-Yourself, LINE-Random Colors, LINE-Yourself, PIE-Random Colors, PIE-Yourself）
     8. Chart Data Step Size For y axis：データ数値単位
   • グローバル
     1. Chart Data Color：チャートのデータ色
     2. データ色を手動で設定する場合は「Edit Style > Chart Bar Color 」から設定が出来ます。
     3. キャプションの色の設定は「Edit Style > Other Tool」から設定が出来ます。

設定内容

ローカル

• Title Height：60
• Editor Column Height：300
• Chart Height For PC/Mobile：280, 260
• Title Col Underline Color：#F6F7F7, #F6F7F7, #F6F7F7
• Editor Bgcolor/Boder color：#DBE8F5, #F6F7F7
• Chart Bgcolor/Boder color：#FFFFFF, , #F6F7F7
• Chart Type：BAR-Random Colors, LINE-Random Colors,  PIE-Random Colors
• Chart Data Step Size For y axis：10, 50, 100

設定内容

ローカル

• Title Height：60
• Editor Column Height：300
• Chart Height For PC/Mobile：260, 260
• Title Col Underline Color：#C0C0C0, #C0C0C0
• Editor Bgcolor/Boder color：#FFFFFF, #FFFFFFF
• Chart Bgcolor/Boder color：#F7F7F7, #FFFFFF
• Chart Type：BAR-Yourself, LINE-Yourself
• Chart Data Step Size For y axis：100, 100

グローバル

• Chart Data Color：
  • 1：#332288, #6495ED, #44AA99
  • 2：#332288, #6495ED, #44AA99, #117733, #999933, #DDCC77

その他

• エディターとチャートの背景色を設定した場合は、「Editor Column Height」と「Chart Height For PC」で調整をして高さを整えて下さい。

設定内容

ローカル

• Title Height：60
• Editor Column Height：200
• Chart Column Height：300
• Chart Height For PC/Mobile：280, 280
• Title Col Underline Color：#C0C0C0, #C0C0C0
• Editor Bgcolor/Boder color：#CFE1F1, #FFFFFF
• Chart Bgcolor/Boder color：#F7F7F7, #C0C0C0
• Chart Type：LINE-Ramdom Colors, PIE-Ramdom Colors
• Chart Data Step Size For y axis：25, 50

その他

• エディターとチャートの背景色を設定した場合は、「Editor Column Height」と「Chart Height For PC」で調整をして高さを整えて下さい。

設定内容

ローカル

• Title Height：60
• Editor Column Height：300
• Chart Height For PC/Mobile：280, 280
• Title Col Underline Color：#C0C0C0, #C0C0C0
• Editor Bgcolor/Boder color：#FFFFFF, #FFFFFF
• Chart Bgcolor/Boder color：#F7F7F7, #C0C0C0
• Chart Type：BAR-Random Colors
• Chart Data Step Size For y axis：100

その他

• エディターとチャートの背景色を設定した場合は、「Editor Column Height」と「Chart Height For PC」で調整をして高さを整えて下さい。

設定内容

ローカル

• Title Height：60
• Editor Column Height：300
• Chart Height For PC/Mobile：280, 280
• Title Col Underline Color：#C0C0C0, #C0C0C0
• Editor Bgcolor/Boder color：#FFFFFF, #FFFFFF
• Chart Bgcolor/Boder color：#F7F7F7, #C0C0C0
• Chart Type：LINE-Random Colors
• Chart Data Step Size For y axis：200

その他

• エディターとチャートの背景色を設定した場合は、「Editor Column Height」と「Chart Height For PC」で調整をして高さを整えて下さい。

設定内容

ローカル

• Chart Height For PC/Mobile：300, 300
• Title Col Underline Color：#C0C0C0
• Chart Bgcolor/Boder color：#F7F7F7, #C0C0C0
• Chart Type：BAR-Random Colors
• Chart Data Step Size For y axis：100
•  Chart Column Width For PC：80％