biz-Stream v5

biz-Stream v5

biz-Streamマニュアル › XMLページレイアウトタグ リファレンス › 第12章 グラフ › 12.3 折れ線グラフ<line-chart>

12.3 折れ線グラフ<line-chart>


12.3.1機能説明

折れ線グラフの指定を行います。


  • ※レイアウト・デザイナでは、｢X 軸目盛り｣｢X 軸補助目盛り線｣が表示されません。ご注意ください。
  • ※biz-Stream で使用する折れ線グラフの用語は下記を参照ください。


折れ線グラフ
  • ① X 軸
  • ② X 軸間隔
  • ③ X 軸目盛り
  • ④ X 軸目盛り単位
  • ⑤ X 軸補助目盛り線
  • ⑥ Y 軸
  • ⑦ Y 軸目盛り
  • ⑧ Y 軸目盛り単位
  • ⑨ Y 軸目盛り線
  • ⑩ マーカー
  • ⑪ マーカー中継線
  • ⑫ グラフ枠線
  • ⑬ グラフ背景
  • ⑭ 凡例
  • ⑮ 凡例項目
  • ⑯ 凡例マーカー
  • ⑰ 系列
  • ※⑯は、緑と青で色分けされている各line を指します。

12.3.2属性説明

1line-chart属性説明

グラフ全体に関する指定を行います。

属性名指定説明型指定内容初期値
name任意名前CDATA－
x任意X座標CDATA0
y任意Y座標CDATA0
unit任意単位(Choice)mm / cm / in / px / ptmm
height必須グラフの高さCDATA－
border-width任意X軸・Y軸、Y軸目盛り線、グラフ枠線の幅CDATA－
border-color任意X軸・Y軸、Y軸目盛り線、グラフ枠線の色CDATA0
background-color任意グラフ背景の色CDATA－
border-x任意X軸補助目盛り線の有無(Choice)true（有り） /false（無し）false
border-y任意Y軸目盛り線の有無(Choice)true（有り） /false（無し）true
margin-scale任意最大値や最小値の指定がない場合、グラフの実データにある最大値と最小値に対し、どの程度マージンを取った値にするかを指定CDATA0～100
またはNull		－
scale任意表示指定
※KEYと指定内容は":"（コロン）で区切り、複数指定する場合は";"（セミコロン）で区切る		CDATA『line-chart： scale属性指定』を参照

※line-chart：scale 属性指定
KEY説明指定内容初期値
frameグラフ枠線の有無true（あり） / false（なし）false
chainマーカー中継線true（あり） / false（なし）true
lineY軸目盛りとY軸目盛り線の数10
styleY軸とY軸の目盛り表示位置left（左側） /
right（右側）/
none（none（X軸目盛り・Y軸目盛りの非表示））		left
font-family目盛りのフォント種類ライブラリ共通ガイド『6.2.1 横書きフォント』を参照MSGothic
font-colorX軸目盛りのフォントカラー0
font-sizeX軸目盛りのフォントサイズ8
font-styleX軸目盛りのフォントスタイルPLAIN /
BOLD /
ITALIC /
BOLD-ITALIC		PLAIN
font-encoding 任意 X軸目盛りのフォントエンコーディング フォントごとのデフォルト値
gradient背景色グラディエーション
※折れ線グラフで追加		true（あり） / false（なし）false


2chart-x-coordinate-axe属性説明
X 軸に関する指定を行います。
属性名指定説明型指定内容初期値
name必須X軸名※反映されませんCDATA－
unit-position任意X軸目盛り単位表示位置(Choice)top（右端） /
side（各目盛り脇） /
none（表示なし）		none
unit-value任意X軸目盛り単位CDATA単位なし
narrow任意X軸目盛りの圧縮方法(Choice)horizon / size / nonenone
format任意X軸目盛りの表示形式CDATAAPI仕様
DecimalFormatに準拠した表示形式
(Java API仕様を参照)		#,##0
scale任意表示指定
※KEYと指定内容は":"（コロン）で区切り、複数指定する場合は";"（セミコロン）で区切る		CDATA『chart-x-coordinate-axe：scale属性指定』を参照－
border-width任意X軸幅CDATA0.1
border-color任意X軸カラーCDATA0

※chart-x-coordinate-axe：scale 属性指定
KEY説明指定内容初期値
font-familyX軸目盛りのフォント種類ライブラリ共通ガイド『6.2.1 横書きフォント』を参照MSGothic
font-colorX軸目盛りのフォントカラー0
font-sizeX軸目盛りのフォントサイズ8
font-styleX軸目盛りのフォントスタイルPLAIN / BOLD /ITALIC/ BOLD-ITALICPLAIN
unitfont-familyX軸目盛り単位のフォント種類ライブラリ共通ガイド『6.2.1 横書きフォント』を参照MSGothic
font-encoding 任意 X軸目盛りのフォントエンコーディング フォントごとのデフォルト値
unitfont-colorX軸目盛り単位のフォントカラー0
unitfont-sizeX軸目盛り単位のフォントサイズ8
unitfont-styleX軸目盛り単位のフォントスタイルPLAIN / BOLD /ITALIC/ BOLD-ITALICPLAIN
unitfont-encoding 任意 X軸目盛り単位のフォントエンコーディング フォントごとのデフォルト値
rotateX軸目盛りの回転90 ～ -90の間で指定0


3chart-y-coordinate-axe属性説明

Y 軸に関する指定を行います。

属性名指定説明型指定内容初期値
name必須Y軸名※反映されませんCDATA－
unit-position任意Y軸目盛り単位表示位置(Choice)top（上部） /
side（横） /
none（表示なし）		none
unit-value任意Y軸目盛り単位CDATA単位なし
narrow任意Y軸目盛りの圧縮方法(Choice)horizon / size / nonenone
format任意Y軸目盛りの表示形式CDATAAPI仕様
DecimalFormatに準拠した表示形式
(Java API仕様を参照)		#,##0
max任意Y軸目盛りの最大値CDATAセルの値から割り出し
min任意Y軸目盛りの最小値CDATAセルの値から割り出し
basis任意X軸とY軸の交点
※本属性の指定の条件は、Y軸目盛りの最小値が負の値であること		(Choice)true（"0"位置） /
false（目盛り最小値位置）		false
border-width任意Y軸幅CDATA0.1
border-color任意Y軸カラーCDATA－
step-value任意Y軸上げ幅CDATA－
scale任意表示指定
※KEYと指定内容は":"（コロン）で区切り、複数指定する場合は";"（セミコロン）で区切る		CDATA『chart-y-coordinate-axe：scale属性指定』を参照－

※chart-y-coordinate-axe：scale 属性指定
KEY説明指定内容初期値
styleY軸とY軸目盛りの表示位置style:left（左側）のみサポートleft
font-familyY軸目盛りのフォント種類ライブラリ共通ガイド『6.2.1 横書きフォント』を参照MSGothic
font-colorY軸目盛りのフォントカラー0
font-sizeY軸目盛りのフォントサイズ8
font-styleY軸目盛りのフォントスタイルPLAIN / BOLD /ITALIC/ BOLD-ITALICPLAIN
font-encoding 任意 Y軸目盛りのフォントエンコーディング フォントごとのデフォルト値
lineY軸目盛りとY軸目盛り線の数10
line-styleY軸目盛り線のスタイル「6.2 線<Line>」にある属性説明の「LineStyle属性」を参照Solid
unitfont-familyY軸目盛り単位のフォント種類ライブラリ共通ガイド『6.2.1 横書きフォント』を参照MSGothic
unitfont-colorY軸目盛り単位のフォントカラー0
unitfont-sizeY軸目盛り単位のフォントサイズ8
unitfont-styleY軸目盛り単位のフォントスタイルPLAIN / BOLD /ITALIC/ BOLD-ITALICPLAIN
unitfont-encoding 任意 Y軸目盛り単位のフォントエンコーディング フォントごとのデフォルト値
rotateY軸目盛りの回転90 ～ -90の間で指定0


4chart-colum属性説明

X項目軸に関する指定を行います。

属性名指定説明型指定内容初期値
column-width必須X軸間隔CDATA－
display-line任意X軸目盛り補助線の有無
※表示する場合は、line-chartのborder-x 属性に"true"指定が必要		(Choice)true（表示する）/
false（表示しない）		false
use-area任意※反映されません
（block-chartでのみ有効な属性）		CDATA0～10060


5line-column属性説明

セル定義に関する指定を行います。

属性名指定説明型指定内容初期値
name任意セル定義名－
marker任意マーカー(Choice)Circle（円） /
Square（正方形） /
Ellipse（楕円） /
Triangle（三角形） /
Star（星型） /
Diamond（菱形） /
Cloud（雲形） /
none（マーカーなし）		Circle
radius必須マーカーの幅・高さ・半径
※shape=noneの場合も必ず指定 		CDATA①Ellipseの場合
・幅：radius×1.5
・高さ：radius×2
②その他の場合
・幅：radius×2
・高さ：radius×2		0.0
border-width任意マーカー中継線の太さCDATA－
border-color必須マーカー中継線の色CDATA色指定 / none（マーカー中継線なし）－
border-style任意マーカー中継線のスタイル(Choice)「6.2 線<Line>」にある属性説明の「LineStyle属性」を参照Solid
background-color必須セル領域の色CDATA－
marker-width任意マーカー枠線の幅CDATA0.0
marker-color任意マーカー枠線の色CDATA－
axis-name任意割り当て系列
※該当する系列軸の名前 （chart-x-coordinate-axe/chart-y-coordinate-axeのname属性）を指定		CDATA－


6chart-explanatory-notes属性説明

凡例に関する定義を行います。

属性名指定説明型指定内容初期値
name任意凡例名CDATA－
width必須凡例の幅CDATA－
height必須凡例の高さCDATA－
border任意凡例の枠線表示(Choice)true（表示） /false（非表示）true
line-color任意凡例枠線の色CDATA－
line-width任意凡例枠線の幅CDATA0
background-color任意凡例の背景色CDATA－
position必須凡例の表示位置(Choice)left-top（左上）/
left-center（左中央）/
left-bottom（左下）/
right-top（右上）/
right-center（右中央）/
right-bottom（右下）/
top-left（上部左）/
top-center（上部中央）/
top-right（上部右）/
bottom-left（下部左）/
bottom-center（下部中央）/
bottom-right（下部右）		right-top
scale任意表示指定
※KEYと指定内容は":"（コロン）で区切り、複数指定する場合は";"（セミコロン）で区切る		CDATA『explanatory-notes：scale属性指定』参照

※chart-explanatory-notes：scale属性指定
KEY説明指定内容初期値
font-family凡例のフォント種類ライブラリ共通ガイド『6.2.1 横書きフォント』を参照MSGothic
font-color凡例のフォントカラー0
font-size凡例のフォントサイズ8
font-style凡例のフォントスタイルPLAIN / BOLD /ITALIC/ BOLD-ITALICPLAIN
font-encoding 任意 凡例のフォントエンコーディング フォントごとのデフォルト値


7chart-explanatory-notesrow属性説明

chart-explanatory-notescellの親要素です。属性定義はありません。



8chart-explanatory-notescell属性説明

凡例に関する定義を行います。

属性名指定説明型指定内容初期値
name任意凡例セル名CDATA－
marker-name必須該当するセル
（line-column）のname属性		CDATA－


9chart-body属性説明

chart-rowの親要素です。属性定義はありません。



10chart-row属性説明

chart-cellの親要素です。属性定義はありません。
セル（line-column）数分の定義を行ってください。



11chart-cell属性説明

セルの値に関する指定を行います。

属性名指定説明型指定内容初期値
name任意セル名前CDATA－


12.3.3記述例

line-chart サンプル1

line-chartサンプル1（『 <biz-Stream_home>/sample/xml/line-chart/line-chartSample1.xml ）』


<?xml version="1.0" encoding="UTF-8"?>
<!-- XML file created by biz-Stream Designer -->
<!-- biz-Stream Copyright BrainSellers.com Corp. -->
<Layout Name="line-chartSample1_1" Width="200" Height="200" X="5" Y="5" xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:bs="http://www.brainsellers.com/schema" xmlns:svg="http://www.brainsellers.com/schema" xmlns:form="http://www.brainsellers.com/schema" xmlns:pdf="http://www.brainsellers.com/schema" version="5.0.0">
    <!-- 折れ線グラフ -->

    <line-chart x="40" height="70" border-x="false" border-y="true" scale="chain:true;font-style:PLAIN;frame:true;font-color:0,0,0;font-size:8;font-family:MSGothic;linestyle:Solid;line-width:0.0;gradient:false;shadow:false;line:10;">
        <!-- 軸定義 -->

        <chart-x-coordinate-axe name="x-axis" narrow="size"/>

        <chart-y-coordinate-axe name="y-axis" narrow="none" format="##0" max="100" min="0" scale="style:right"/>

        <!-- X軸間隔定義 -->

        <chart-column column-width="30" display-line="true"/>
        <chart-column column-width="30" display-line="true"/>
        <chart-column column-width="30" display-line="true"/>
        <!-- マーカー定義 -->

        <line-column name="marker1" radius="1" border-color="51,0,255" marker="Circle" border-style="Solid" axis-name="y-axis"/>

        <line-column name="marker2" radius="1" border-color="51,51,204" marker="Square" border-style="Solid" axis-name="y-axis"/>

        <line-column name="marker3" radius="1" border-color="51,102,153" marker="Ellipse" border-style="Solid" axis-name="y-axis"/>

        <line-column name="marker4" radius="1" border-color="51,153,102" marker="Triangle" border-style="Solid" axis-name="y-axis"/>

        <line-column name="marker5" radius="1" border-color="51,204,51" marker="Star" border-style="Solid" axis-name="y-axis"/>

        <line-column name="marker6" radius="1" border-color="51,255,0" marker="Diamond" border-style="Solid" axis-name="y-axis"/>

        <line-column name="marker7" radius="1" border-color="102,153,102" marker="Cloud" border-style="Solid" axis-name="y-axis"/>

        <!-- 凡例定義 -->

        <chart-explanatory-notes width="40" height="30" border="true" line-color="0,0,0" line-width="0.1" position="left-top">
            <chart-explanatory-notesrow>
                <chart-explanatory-notescell marker-name="marker1">グラフ1</chart-explanatory-notescell>
                <chart-explanatory-notescell marker-name="marker2">グラフ2</chart-explanatory-notescell>
                <chart-explanatory-notescell marker-name="marker3">グラフ3</chart-explanatory-notescell>
            </chart-explanatory-notesrow>
            <chart-explanatory-notesrow>
                <chart-explanatory-notescell marker-name="marker4">ブロック4</chart-explanatory-notescell>
            </chart-explanatory-notesrow>
            <chart-explanatory-notesrow>
                <chart-explanatory-notescell marker-name="marker5">ブロック5</chart-explanatory-notescell>
                <chart-explanatory-notescell marker-name="marker6">ブロック6</chart-explanatory-notescell>
            </chart-explanatory-notesrow>
            <chart-explanatory-notesrow>
                <chart-explanatory-notescell marker-name="marker7">ブロック7</chart-explanatory-notescell>
            </chart-explanatory-notesrow>
        </chart-explanatory-notes>
        <!-- マーカーのデータ値定義 -->

        <chart-body>
            <chart-row>
                <chart-cell>20</chart-cell>
                <chart-cell>30</chart-cell>
                <chart-cell>40</chart-cell>
                <chart-cell>50</chart-cell>
                <chart-cell>60</chart-cell>
                <chart-cell>70</chart-cell>
                <chart-cell>80</chart-cell>
            </chart-row>
            <chart-row>
                <chart-cell>30</chart-cell>
                <chart-cell>40</chart-cell>
                <chart-cell>50</chart-cell>
                <chart-cell>60</chart-cell>
                <chart-cell>70</chart-cell>
                <chart-cell>80</chart-cell>
                <chart-cell>90</chart-cell>
            </chart-row>
            <chart-row>
                <chart-cell>20</chart-cell>
                <chart-cell>30</chart-cell>
                <chart-cell>40</chart-cell>
                <chart-cell>50</chart-cell>
                <chart-cell>60</chart-cell>
                <chart-cell>70</chart-cell>
                <chart-cell>80</chart-cell>
            </chart-row>
        </chart-body>
    </line-chart>
</Layout>

生成されるPDF（『 <biz-Stream_home>/sample/xml/line-chart/line-chartSample1.pdf ）』


折れ線グラフ
＜マーカーの大きさ指定方法＞
  • ① shape="Ellipse"（楕円）の場合
    ・幅 = radius の指定値×1.5
    ・高さ = radius の指定値
  • ②その他形状である場合
    ・幅 = radius の指定値×2
    ・高さ = radius の指定値×2


line-chart サンプル2

line-chartサンプル2（『 <biz-Stream_home>/sample/xml/line-chart/line-chartSample2.xml ）』


<?xml version="1.0" encoding="UTF-8"?>
<!-- XML file created by biz-Stream Designer -->
<!-- biz-Stream Copyright BrainSellers.com Corp. -->
<Layout Name="line-chartSample2_1" Width="130" Height="100" X="5" Y="5" xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:bs="http://www.brainsellers.com/schema" xmlns:svg="http://www.brainsellers.com/schema" xmlns:form="http://www.brainsellers.com/schema" xmlns:pdf="http://www.brainsellers.com/schema" version="5.0.0">
    <!-- 折れ線グラフ -->

    <line-chart x="20" height="70" border-x="true" border-y="true" scale="chain:true;font-style:PLAIN;frame:true;font-color:0,0,0;font-size:8;font-family:MSGothic;linestyle:Solid;line-width:0.0;gradient:false;shadow:false;line:10;">
        <!-- 軸定義 -->

        <chart-x-coordinate-axe name="x-axis" narrow="size"/>

        <chart-y-coordinate-axe name="y-axis" narrow="none" format="##0" max="50" min="0" scale="style:right"/>

        <!-- X軸間隔定義 -->

        <chart-column column-width="15" display-line="true"/>
        <chart-column column-width="15" display-line="true"/>
        <chart-column column-width="15" display-line="true"/>
        <chart-column column-width="15" display-line="true"/>
        <chart-column column-width="15" display-line="true"/>
        <!-- マーカー定義 -->

        <line-column name="marker2" border-width="0.3" radius="2" border-color="0,0,255" marker="none" border-style="Solid" axis-name="y-axis"/>

        <!-- マーカーのデータ値定義 -->

        <chart-body>
            <chart-row>
                <chart-cell>15</chart-cell>
            </chart-row>
            <chart-row>
                <chart-cell>10</chart-cell>
            </chart-row>
            <chart-row>
                <chart-cell>25</chart-cell>
            </chart-row>
            <chart-row>
                <chart-cell>30</chart-cell>
            </chart-row>
            <chart-row>
                <chart-cell>40</chart-cell>
            </chart-row>
        </chart-body>
    </line-chart>
</Layout>

（23行目抜粋）

<line-column name="marker2" border-width="0.3" radius="2" border-color="0,0,255" marker="none" border-style="Solid" axis-name="y-axis"/>


生成されるPDF（『 <biz-Stream_home>/sample/xml/line-chart/line-chartSample2.pdf ）』


折れ線グラフ
＜マーカーがない場合＞
  • ①line-column の属性marker に"none"が指定されている場合、マーカーは表示されません。


line-chart サンプル3

line-chartサンプル3（『 <biz-Stream_home>/sample/xml/line-chart/line-chartSample3.xml ）』

<?xml version="1.0" encoding="UTF-8"?>
<!-- XML file created by biz-Stream Designer -->
<!-- biz-Stream Copyright BrainSellers.com Corp. -->
<Layout Name="line-chartSample1_2" Width="130" Height="100" X="5" Y="5" xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:bs="http://www.brainsellers.com/schema" xmlns:svg="http://www.brainsellers.com/schema" xmlns:form="http://www.brainsellers.com/schema" xmlns:pdf="http://www.brainsellers.com/schema" version="5.0.0">
    <!-- 折れ線グラフ -->

    <line-chart x="20" height="70" border-x="true" border-y="true" scale="chain:false;font-style:PLAIN;frame:true;font-color:0,0,0;font-size:8;font-family:MSGothic;linestyle:Solid;line-width:0.0;gradient:false;shadow:false;line:10;">
        <!-- 軸定義 -->

        <chart-x-coordinate-axe name="x-axis" narrow="size"/>

        <chart-y-coordinate-axe name="y-axis" narrow="none" format="##0" max="50" min="0" scale="style:right"/>

        <!-- X軸間隔定義 -->

        <chart-column column-width="15" display-line="true"/>
        <chart-column column-width="15" display-line="true"/>
        <chart-column column-width="15" display-line="true"/>
        <chart-column column-width="15" display-line="true"/>
        <chart-column column-width="15" display-line="true"/>
        <!-- マーカー定義 -->

        <line-column name="marker2" border-width="0.1" radius="2" border-color="0,0,255" marker="Square" border-style="Solid" marker-width="2" marker-color="51,0,102" background-color="0,51,255" axis-name="y-axis"/>

        <!-- マーカーのデータ値定義 -->

        <chart-body>
            <chart-row>
                <chart-cell>15</chart-cell>
            </chart-row>
            <chart-row>
                <chart-cell>10</chart-cell>
            </chart-row>
            <chart-row>
                <chart-cell>25</chart-cell>
            </chart-row>
            <chart-row>
                <chart-cell>30</chart-cell>
            </chart-row>
            <chart-row>
                <chart-cell>40</chart-cell>
            </chart-row>
        </chart-body>
    </line-chart>
</Layout>

（7行目抜粋）

<line-chart x="20" height="70" border-x="true" border-y="true" scale="chain:false;font-style:PLAIN;frame:true;font-color:0,0,0;font-size:8;font-family:MSGothic;linestyle:Solid;line-width:0.0;gradient:false;shadow:false;line:10;">


生成されるPDF <biz-Stream_home>/sample/xml/line-chart/line-chartSample3.pdf


折れ線グラフ
＜マーカー中継線がない場合＞
  • ②line-chart の属性scale にchain:false が指定されている場合、マーカー中継線は表示されません。

ただし、どちらの場合も、line-column の属性radius（半径）とborder-color（マーカー中継線） の指定は必須となります。