biz-Stream v5

biz-Stream v5

biz-Streamマニュアル › XMLページレイアウトタグ リファレンス › 第12章 グラフ › 12.7 複合グラフ<mix-chart>

XMLページレイアウトタグ リファレンス

12.7 複合グラフ<mix-chart>


12.7.1機能説明

複合グラフについて指定を行います。
複合の組み合わせは、縦棒グラフ・折れ線グラフ・面グラフ・キャンドルチャートの中から選択できます。
biz-Streamで使用するグラフ用語は、縦棒グラフ・折れ線グラフ・面グラフ・キャンドルチャートのページをご参照ください。



12.7.2属性説明

1mix-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
scale任意表示指定
※KEYと指定内容は":"（コロン）で区切り、複数指定の場合は";"（セミコロン）で区切る		CDATA『mix-chart：scale属性指定』を参照

※ mix-chart：scale属性指定
KEY説明指定内容初期値
chain区分線
※区分線に"true"を指定する場合、次の条件を満たす必要あり
・block-type="vertical"
・userarea="100"以外
・セルの値は正の値のみ		true（あり） / false（なし）true
frameグラフ枠の有無true（あり） /
false（なし）		false
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-ITALICPLAIN
font-encoding X軸目盛りのフォントエンコーディング 90ms-RKSJ-H / 90ms-RKSJ-V / 90msp-RKSJ-H / 90msp-RKSJ-V / UniJIS-UTF16-H / UniJIS-UTF16-V フォントごとのデフォルト値

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
border-width任意X軸幅CDATA0.1
border-color任意X軸カラーCDATA0
scale任意表示指定
※KEYと指定内容は":"（コロン）で区切り、複数指定の場合は";"（セミコロン）で区切る		CDATA『chart-x-coordinate-axe：scale属性指定』を参照 －

※ 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
font-encoding X軸目盛りのフォントエンコーディング 90ms-RKSJ-H / 90ms-RKSJ-V / 90msp-RKSJ-H / 90msp-RKSJ-V / UniJIS-UTF16-H / UniJIS-UTF16-V フォントごとのデフォルト値
unitfont-familyX軸目盛り単位のフォント種類ライブラリ共通ガイド『6.2.1 横書きフォント』を参照MSGothic
unitfont-colorX軸目盛り単位のフォントカラー0
unitfont-sizeX軸目盛り単位のフォントサイズ8
unitfont-styleX軸目盛り単位のフォントスタイルPLAIN / BOLD /ITALIC/ BOLD-ITALICPLAIN
unitfont-encoding X軸目盛り単位のフォントエンコーディング 90ms-RKSJ-H / 90ms-RKSJ-V / 90msp-RKSJ-H / 90msp-RKSJ-V / UniJIS-UTF16-H / UniJIS-UTF16-V フォントごとのデフォルト値
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 /
none		none
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（左側） /
style:right（右側） /
style:none（Y数値軸なし・Y数値軸目盛り表示なし）		left
font-familyY軸目盛りのフォント種類ライブラリ共通ガイド『6.2.1 横書きフォント』を参照MSGothic
font-colorY軸目盛りのフォントカラー0
font-sizeY軸目盛りのフォントサイズ8
font-styleY軸目盛りのフォントスタイルPLAIN / BOLD /ITALIC/ BOLD-ITALICPLAIN
font-encoding Y軸目盛りのフォントエンコーディング 90ms-RKSJ-H / 90ms-RKSJ-V / 90msp-RKSJ-H / 90msp-RKSJ-V / UniJIS-UTF16-H / UniJIS-UTF16-V フォントごとのデフォルト値
lineY軸目盛りとY軸目盛り線の数10
line-styleY軸目盛り線のスタイル『XMLページレイアウトタグ リファレンスガイド』の
「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軸目盛り単位のフォントエンコーディング 90ms-RKSJ-H / 90ms-RKSJ-V / 90msp-RKSJ-H / 90msp-RKSJ-V / UniJIS-UTF16-H / UniJIS-UTF16-V フォントごとのデフォルト値
rotateY軸目盛りの回転90 ～ -90の間で指定0

4chart-column属性説明

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

属性名指定説明型指定内容初期値
name任意名前CDATA－
column-width必須X軸間隔CDATA－
display-line任意X軸目盛り補助線の有無
※表示する場合は、block-chartのborder-x属性に"true"が指定されている必要あり		(Choice)true（表示する）/
false（表示しない）		false
use-area任意X軸間隔におけるブロック表示の割合CDATA0～10060

5chart-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 凡例のフォントエンコーディング 90ms-RKSJ-H / 90ms-RKSJ-V / 90msp-RKSJ-H / 90msp-RKSJ-V / UniJIS-UTF16-H / UniJIS-UTF16-V フォントごとのデフォルト値

6chart-explanatory-notesrow属性説明

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



7chart-explanatory-notescell属性説明

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

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

8mix-block-chart属性説明

複合縦棒グラフに関する指定を行います。

属性名指定説明型指定内容初期値
name任意グラフ名CDATA－
unit任意単位(Choice)mm / cm / in / px / ptmm
border-x任意X軸補助目盛り線の有無(Choice)true（有り） /
false（無し）		false
border-y任意Y軸目盛り線の有無(Choice)true（有り） /
false（無し）		true
block-type任意縦棒グラフ種類
（積み上げ / 集合）		(Choice)horizon（集合）/
vertical（積み上げ）		vertical
data-label任意データラベル表示位置(Choice)top（セル上端）/
side（セル横）/
in（セル中央）/
none（無し）		none
format任意データラベルの表示形式CDATAAPI仕様
DecimalFormatに準拠した表示形式
(Java API仕様を参照)		#,##0
scale任意表示指定
※KEYと指定内容は":"（コロン）で区切り、複数指定の場合は";"（セミコロン）で区切る		CDATA『mix-block-chart：scale属性指定』を参照

※ mix-block-chart：scale属性指定
KEY説明指定内容初期値
chain区分線
※区分線に"true"を指定する場合、
次の条件を満たす場合に有効
・block-type="vertical"
・userarea="100"以外
・セルの値に負の値が含まれない		true（あり） / false（なし）true
frameグラフ枠の有無true（あり） / false（なし）false

9block-column属性説明

複合縦棒グラフのセルに関する指定を行います。

属性名指定説明型指定内容初期値
name任意セル定義名CDATA－
border-width任意セル輪郭線の太さCDATA－
border-color任意セル輪郭線の色CDATA－
background-color必須セル領域の色CDATA－
axis-name任意割り当て系列
※該当する系列軸の名前
（chart-x-coordinate-axe/chart-y-coordinate-axeのname属性）を指定		CDATA－

10mix-line-chart属性説明

複合折れ線グラフ全体に関する指定を行います。

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

※ mix-line-chart：scale属性指定
KEY説明指定内容初期値
frameグラフ枠線の有無true（あり） / false（なし）false
chainマーカー中継線true（あり） / false（なし）true

11line-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－

12mix-fill-chart属性説明

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

属性名指定説明型指定内容初期値
name任意グラフ名CDATA－
unit任意単位(Choice)mm / cm / in / px / ptmm
scale任意表示指定
※KEYと指定内容は":"（コロン）で区切り、複数指定の場合は";"（セミコロン）で区切る		CDATA『mix-fill-chart：scale属性指定』を参照

※ mix-fill-chart：scale属性指定
KEY説明指定内容初期値
frameグラフ枠の有無true（あり） / false（なし）false

13fill-column属性説明

セルに関する指定を行います。
fill-columnのcontent（#PCDATA）には、面グラフの初期値を指定します。

属性名指定説明型指定内容初期値
name任意セル定義名CDATA－
border-width任意セル輪郭線の太さCDATA－
border-color必須セル輪郭線の色CDATA－
background-color必須セル領域の色CDATA－
axis-name任意割り当て系列
※該当する系列軸の名前
（chart-x-coordinate-axe/chart-y-coordinate-axeのname属性）を指定		CDATA－

14chart-body属性説明

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



15chart-row属性説明

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



16chart-cell属性説明

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

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

17mix-candle-chart属性説明

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

属性名指定説明型指定内容初期値
name任意グラフ名CDATA－
unit任意単位(Choice)mm / cm / in / px / ptmm
border-width任意ひげ線の幅CDATA－
border-color任意グラフ枠線の色
※キャンドルチャートでは未使用		CDATA
border-x任意X軸目盛り線の有無(Choice)true(有り) /
false(無し) 		true
border-y任意Y軸目盛り線の有無(Choice)true（有り） /
false（無し）		true
upBorder-color任意陽線の背景色CDATA255,255,255
downBorder-color任意陰線の背景色CDATA
scale任意表示指定
※KEYと指定内容は":"（コロン）で区切り、複数指定の場合は";"（セミコロン）で区切る		CDATA『chart-x-coordinate-axe：scale属性指定』を参照
margin-scale任意最大値や最小値の指定がない場合、グラフの実データにある最大値と最小値に対し、どの程度マージンを取った値にするかを指定CDATA0～100
またはNull		－

18candle-column属性説明

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

属性名指定説明型指定内容初期値
name任意セル定義名－
border-width任意マーカー中継線の太さCDATA－
border-color必須マーカー中継線の色CDATA色指定 /
none（マーカー中継線なし）		－


12.7.3記述例

mix-chartサンプル1

縦棒グラフと折れ線グラフの複合グラフサンプルです。

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


<?xml version="1.0" encoding="UTF-8"?>
<!-- XML file created by biz-Stream Designer -->
<!-- biz-Stream Copyright BrainSellers.com Corp. -->
<Layout Name="mix-chartSample1" Width="190" Height="90" X="10" Y="10" 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">
    <mix-chart height="50" border-x="true" border-y="false" 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" unit-position="side" unit-value="月" narrow="size" scale="font-size:6;unitfont-size:10;unitfont-size:6"/>

        <chart-y-coordinate-axe name="y_axis1" unit-position="top" unit-value="人" narrow="none" format="##0" max="120" min="70" scale="font-size:6"/>

        <chart-y-coordinate-axe name="y_axis2" unit-position="top" unit-value="%" narrow="none" format="##0.0" max="4" min="-3" basis="true" scale="style:right;font-size:6;linestyle:Border;line:7"/>

        <!-- X軸間隔 -->

        <chart-column column-width="10" display-line="true">02/05</chart-column>
        <chart-column column-width="10" display-line="true">02/06</chart-column>
        <chart-column column-width="10" display-line="true">02/07</chart-column>
        <chart-column column-width="10" display-line="true">02/08</chart-column>
        <chart-column column-width="10" display-line="true">02/09</chart-column>
        <chart-column column-width="10" display-line="true">02/10</chart-column>
        <chart-column column-width="10" display-line="true">02/11</chart-column>
        <chart-column column-width="10" display-line="true">02/12</chart-column>
        <chart-column column-width="10" display-line="true">03/01</chart-column>
        <chart-column column-width="10" display-line="true">03/02</chart-column>
        <chart-column column-width="10" display-line="true">03/03</chart-column>
        <chart-column column-width="10" display-line="true">03/04</chart-column>
        <chart-column column-width="10" display-line="true">03/05</chart-column>
        <!-- 凡例定義 -->

        <chart-explanatory-notes width="30" height="12" border="true" line-color="0,0,0" line-width="0.1" position="right-center">
            <chart-explanatory-notesrow>
                <chart-explanatory-notescell marker-name="marker1">折れ線グラフ1</chart-explanatory-notescell>
            </chart-explanatory-notesrow>
            <chart-explanatory-notesrow>
                <chart-explanatory-notescell marker-name="marker2">折れ線グラフ2</chart-explanatory-notescell>
            </chart-explanatory-notesrow>
            <chart-explanatory-notesrow>
                <chart-explanatory-notescell marker-name="marker3">縦棒グラフ1</chart-explanatory-notescell>
            </chart-explanatory-notesrow>
        </chart-explanatory-notes>
        <mix-line-chart border-x="false" border-y="true" scale="chain:true;font-style:PLAIN;style:left;frame:false;font-color:0,0,0;font-size:0;font-family:MSGothic;linestyle:Solid;line-width:0.0;gradient:false;shadow:false;line:10;">
            <line-column name="marker1" border-width="0.5" radius="1" border-color="0,50,128" marker="Square" border-style="Solid" marker-width="0.5" marker-color="0,50,128" background-color="255,255,255" axis-name="y_axis1"/>

            <line-column name="marker2" border-width="0.5" radius="1" border-color="0,128,50" marker="Triangle" border-style="Dot" marker-width="0.5" marker-color="0,128,50" background-color="0,128,50" axis-name="y_axis1"/>

            <chart-body>
                <chart-row>
                    <chart-cell name="cell1">80</chart-cell>
                    <chart-cell name="cell2">100</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="cell3">80</chart-cell>
                    <chart-cell name="cell4">100</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="cell5">80</chart-cell>
                    <chart-cell name="cell6">100</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="cell7">95</chart-cell>
                    <chart-cell name="cell8"/>
                </chart-row>
                <chart-row>
                    <chart-cell name="cell9">90</chart-cell>
                    <chart-cell name="cell10">85</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="cell11">85</chart-cell>
                    <chart-cell name="cell12">82</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="cell13">92</chart-cell>
                    <chart-cell name="cell14">87</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="cell15">112</chart-cell>
                    <chart-cell name="cell16">90</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="cell17">90</chart-cell>
                    <chart-cell name="cell18">95</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="cell19">83</chart-cell>
                    <chart-cell name="cell20">97</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="cell21">82</chart-cell>
                    <chart-cell name="cell22">95</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="cell23">75</chart-cell>
                    <chart-cell name="cell24">82</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="cell25">78</chart-cell>
                    <chart-cell name="cell26">85</chart-cell>
                </chart-row>
            </chart-body>
        </mix-line-chart>
        <mix-block-chart border-x="false" border-y="true" block-type="vertical" display-label="false" data-narrow="false" scale="chain:false;font-style:PLAIN;frame:false;font-color:0,0,0;font-size:0;font-family:MSGothic;linestyle:Solid;line-width:0.0;gradient:false;shadow:false;line:10;">
            <block-column name="marker3" background-color="255,100,200" axis-name="y_axis2"/>

            <chart-body>
                <chart-row>
                    <chart-cell name="blockcell1">2.8</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell2">-2.4</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell3">1.8</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell4">0</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell5">0.1</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell6"/>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell7">-2.6</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell8">0.3</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell9">3.5</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell10">-2.2</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell11">2.5</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell12">-1.8</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell13">2.5</chart-cell>
                </chart-row>
            </chart-body>
        </mix-block-chart>
    </mix-chart>
</Layout>

(10行目抜粋)

<chart-y-coordinate-axe name="y_axis1" unit-position="top" unit-value="人" narrow="none" format="##0" max="120" min="70" scale="font-size:6"/>

(12行目抜粋)

<chart-y-coordinate-axe name="y_axis2" unit-position="top" unit-value="%" narrow="none" format="##0.0" max="4" min="-3" basis="true" scale="style:right;font-size:6;linestyle:Border;line:7"/>

(33行目抜粋)

<chart-explanatory-notescell marker-name="marker1">折れ線グラフ1</chart-explanatory-notescell>

(36行目抜粋)

<chart-explanatory-notescell marker-name="marker2">折れ線グラフ2</chart-explanatory-notescell>

(39行目抜粋)

<chart-explanatory-notescell marker-name="marker3">縦棒グラフ1</chart-explanatory-notescell>

(43行目抜粋)

<line-column name="marker1" border-width="0.5" radius="1" border-color="0,50,128" marker="Square" border-style="Solid" marker-width="0.5" marker-color="0,50,128" background-color="255,255,255" axis-name="y_axis1"/>

(45行目抜粋)

<line-column name="marker2" border-width="0.5" radius="1" border-color="0,128,50" marker="Triangle" border-style="Dot" marker-width="0.5" marker-color="0,128,50" background-color="0,128,50" axis-name="y_axis1"/>

(103行目抜粋)

<block-column name="marker3" background-color="255,100,200" axis-name="y_axis2"/>



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

複合グラフ
  • ※折れ線グラフ「marker1」「marker2」は、axis-nameに「y_axis1」が指定されているため、y_axis1（ここでは左側表示のY軸）系列に関連付けられて表示されます。
  • ※縦棒グラフ「marker3」は、axis-nameに「y_axis2」が指定されているため、 y_axis2（ここでは右側表示のY軸）系列に関連付けられて表示されます。


mix-chartサンプル2

縦棒グラフと面グラフの複合グラフサンプルです。

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


<?xml version="1.0" encoding="UTF-8"?>
<!-- XML file created by biz-Stream Designer -->
<!-- biz-Stream Copyright BrainSellers.com Corp. -->
<Layout Name="mix-chartSample2" Width="80" Height="80" X="20" Y="15" Unit="mm" 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">
    <mix-chart height="50" border-color="0,0,0" border-x="true" border-y="true" scale="chain:true;font-style:PLAIN;frame:false;font-color:0,0,0;font-size:6;font-family:MSGothic;linestyle:line;line-width:0.0;gradient:false;shadow:false;line:10;">
        <!-- 軸定義 -->

        <chart-x-coordinate-axe name="x_axis" unit-position="side" unit-value="月" narrow="size"/>

        <chart-y-coordinate-axe name="y_axis1" unit-position="side" unit-value="%" narrow="none" format="##0" max="100" min="-100" basis="true" scale="font-size:6;style:left;line:10;"/>

        <!-- X軸間隔 -->

        <chart-column column-width="2" use-area="100"/>
        <chart-column column-width="2" use-area="100">02/06</chart-column>
        <chart-column column-width="2" use-area="100"/>
        <chart-column column-width="2" use-area="100"/>
        <chart-column column-width="2" use-area="100"/>
        <chart-column column-width="2" use-area="100"/>
        <chart-column column-width="2" use-area="100"/>
        <chart-column column-width="2" use-area="100"/>
        <chart-column column-width="2" use-area="100">03/01</chart-column>
        <chart-column column-width="2" use-area="100"/>
        <chart-column column-width="2" use-area="100"/>
        <chart-column column-width="2" use-area="100"/>
        <chart-column column-width="2" use-area="100"/>
        <chart-column column-width="2" use-area="100"/>
        <chart-column column-width="2" use-area="100">03/06</chart-column>
        <chart-column column-width="2" use-area="100"/>
        <chart-column column-width="2" use-area="100"/>
        <chart-column column-width="2" use-area="100"/>
        <chart-column column-width="2" use-area="100"/>
        <chart-column column-width="2" use-area="100"/>
        <!-- 縦棒グラフ -->

        <mix-block-chart border-x="false" border-y="true" block-type="vertical" display-label="false" data-narrow="false" scale="chain:false;font-style:PLAIN;frame:false;font-color:0,0,0;font-size:0;font-family:MSGothic;linestyle:Solid;line-width:0.0;gradient:false;shadow:false;line:10;">
            <block-column name="marker1" border-color="0,0,0" background-color="255,100,200" axis-name="y_axis1"/>

            <chart-body>
                <chart-row>
                    <chart-cell name="blockcell1">-40</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell2">20</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell3">33</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell4">41</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell5">-10</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell6">-20</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell7">15</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell8">30</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell9">45</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell10">24</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell11">-75</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell12">10</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell13">25</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell14">-40</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell15">45</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell16">38</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell17">-44</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell18">60</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcell19">52</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="blockcellc20">20</chart-cell>
                </chart-row>
            </chart-body>
        </mix-block-chart>
        <!-- 面グラフ -->

        <mix-fill-chart scale="font-style:PLAIN;style:left;frame:false;font-color:0,0,0;font-size:0;font-family:MSGothic;linestyle:Solid;line-width:0.0;gradient:false;shadow:false;line:10;">
            <fill-column name="marker2" background-color="255,255,0" border-color="0,0,0" axis-name="y_axis1"/>
            <chart-body>
                <chart-row>
                    <chart-cell name="fillcell1">98</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="fillcell2">92</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="fillcell3">90</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="fillcell4">95</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="fillcell5">89</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="fillcell6">85</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="fillcell7">93</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="fillcell8">80</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="fillcell9">71</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="fillcell10">65</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="fillcell11">45</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="fillcell12">58</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="fillcell13">-20</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="fillcell14">-32</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="fillcell15">-50</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="fillcell16">-41</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="fillcell17">-62</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="fillcell18">-74</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="fillcell19">-55</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="fillcell20">-78</chart-cell>
                </chart-row>
            </chart-body>
        </mix-fill-chart>
    </mix-chart>
</Layout>

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

複合グラフ
  • ※縦棒グラフ「marker1」と面グラフ「marker2」は、axis-nameに「y_axis1」が指定されているため、y_axis1（ここでは左側表示のY軸）系列に関連付けられて表示されます。



mix-chartサンプル3

キャンドルチャートと折れ線グラフの複合グラフサンプルです。

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


<?xml version="1.0" encoding="UTF-8"?>
<!-- XML file created by biz-Stream Designer -->
<!-- biz-Stream Copyright BrainSellers.com Corp. -->
<Layout Width="150mm" Height="120mm" 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">
    <mix-chart x="10" y="15" unit="mm" height="90" background-color="255,255,153" 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-axe" unit-position="top" unit-value="日" narrow="size" border-width="0.1" border-color="0,0,0" scale="font-style:PLAIN;font-family:MSGothic;unitfont-color:0,0,0;unitfont-style:PLAIN;font-size:8;unitfont-size:8;unitfont-family:MSGothic;font-color:0,0,0;"/>

        <chart-y-coordinate-axe name="y-axe_1" unit-position="top" unit-value="円" narrow="none" border-width="0.1" border-color="0,0,0" format="##0" max="100" min="0" basis="true" scale="line:20;style:left;"/>

        <chart-column name="chartcolumn_1" column-width="22.343" display-line="true" use-area="60">2000/02/01</chart-column>
        <chart-column name="chartcolumn_2" column-width="22.343" display-line="true" use-area="60">2000/02/02</chart-column>
        <chart-column name="chartcolumn_3" column-width="22.343" display-line="true" use-area="60">2000/02/03</chart-column>
        <chart-column name="chartcolumn_4" column-width="22.343" display-line="true" use-area="60">2000/02/04</chart-column>
        <chart-column name="chartcolumn_5" column-width="22.343" display-line="true" use-area="60">2000/02/05</chart-column>
        <chart-column name="chartcolumn_6" column-width="22.343" display-line="true" use-area="60">2000/02/06</chart-column>
        <!-- キャンドルチャート -->

        <mix-candle-chart name="candle1" border-x="true" border-y="true" upBorder-color="255,255,255" downBorder-color="0,0,0" scale="chain:true;font-style:PLAIN;style:left;frame:false;font-color:0,0,0;font-size:8;font-family:MSGothic;linestyle:Solid;line-width:0.0;gradient:false;shadow:false;line:10;">
            <candle-column name="candlecolumn_1" radius="0" background-color="255,0,0" axis-name="y-axe_1"/>

            <candle-column name="candlecolumn_2" radius="0" background-color="255,140,0" axis-name="y-axe_1"/>

            <candle-column name="candlecolumn_3" radius="0" background-color="255,255,0" axis-name="y-axe_1"/>

            <candle-column name="candlecolumn_4" radius="0" background-color="0,128,0" axis-name="y-axe_1"/>

            <candle-column name="candlecolumn_5" radius="0" background-color="0,206,209" axis-name="y-axe_1"/>

            <candle-column name="candlecolumn_6" radius="0" background-color="0,0,255" axis-name="y-axe_1"/>

            <chart-body>
                <chart-row>
                    <chart-cell name="candlecolumn_1_1">10</chart-cell>
                    <chart-cell name="candlecolumn_2_1">25</chart-cell>
                    <chart-cell name="candlecolumn_3_1">60</chart-cell>
                    <chart-cell name="candlecolumn_4_1">70</chart-cell>
                    <chart-cell name="candlecolumn_5_1">80</chart-cell>
                    <chart-cell name="candlecolumn_6_1">100</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="candlecolumn_1_2">4</chart-cell>
                    <chart-cell name="candlecolumn_2_2">6</chart-cell>
                    <chart-cell name="candlecolumn_3_2">20</chart-cell>
                    <chart-cell name="candlecolumn_4_2">52</chart-cell>
                    <chart-cell name="candlecolumn_5_2">22</chart-cell>
                    <chart-cell name="candlecolumn_6_2">20</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="candlecolumn_1_3">5</chart-cell>
                    <chart-cell name="candlecolumn_2_3">9</chart-cell>
                    <chart-cell name="candlecolumn_3_3">23</chart-cell>
                    <chart-cell name="candlecolumn_4_3">54</chart-cell>
                    <chart-cell name="candlecolumn_5_3">65</chart-cell>
                    <chart-cell name="candlecolumn_6_3">28</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="candlecolumn_1_4">9</chart-cell>
                    <chart-cell name="candlecolumn_2_4">23</chart-cell>
                    <chart-cell name="candlecolumn_3_4">54</chart-cell>
                    <chart-cell name="candlecolumn_4_4">65</chart-cell>
                    <chart-cell name="candlecolumn_5_4">28</chart-cell>
                    <chart-cell name="candlecolumn_6_4">95</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="candlecolumn_1_5"/>
                    <chart-cell name="candlecolumn_2_5"/>
                    <chart-cell name="candlecolumn_3_5"/>
                    <chart-cell name="candlecolumn_4_5"/>
                    <chart-cell name="candlecolumn_5_5"/>
                    <chart-cell name="candlecolumn_6_5"/>
                </chart-row>
                <chart-row>
                    <chart-cell name="candlecolumn_1_6"/>
                    <chart-cell name="candlecolumn_2_6"/>
                    <chart-cell name="candlecolumn_3_6"/>
                    <chart-cell name="candlecolumn_4_6"/>
                    <chart-cell name="candlecolumn_5_6"/>
                    <chart-cell name="candlecolumn_6_6"/>
                </chart-row>
            </chart-body>
        </mix-candle-chart>
        <!-- 折れ線グラフ -->

        <mix-line-chart name="line1" border-x="true" border-y="true" scale="chain:true;font-style:PLAIN;style:left;frame:false;font-color:0,0,0;font-size:8;font-family:MSGothic;linestyle:Solid;line-width:0.0;gradient:false;shadow:false;line:10;">
            <line-column name="linecolumn_1" border-width="0.5" radius="1" border-color="255,0,255" marker="Circle" border-style="Solid" marker-color="255,0,255" background-color="255,0,255" axis-name="y-axe_1"/>

            <chart-body>
                <chart-row>
                    <chart-cell name="linecolumn_1_1">7</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="linecolumn_1_2">16</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="linecolumn_1_3">39</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="linecolumn_1_4">60</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="linecolumn_1_5">49</chart-cell>
                </chart-row>
                <chart-row>
                    <chart-cell name="linecolumn_1_6">62</chart-cell>
                </chart-row>
            </chart-body>
        </mix-line-chart>
    </mix-chart>
</Layout>

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


複合グラフ