mb_language("uni"); mb_internal_encoding("utf-8"); mb_http_input("auto"); mb_http_output("utf-8"); ?>
今回は,棒グラフや円グラフといったビジネス・グラフを表わすためのボキャブラリについてお話しします。なお,言い慣れたビジネス・グラフは,英語では「chart」と言いますので,ここでは紙面を節約するために「チャート」と呼ぶことにします。チャートは様々な文書で用いられていますので,そのボキャブラリは個別の応用向けというよりも,MathMLやSVGのように,どの応用にも共通の基本的なボキャブラリと考えられます。
面白いことに,基本的なボキャブラリを開発しているはずのW3Cは,チャートのボキャブラリ規格を策定しておりません。確かに,チャートは,拡大・縮小可能なベクトル図形を表わすボキャブラリであるSVGで表現できますから,共通の基本を作る立場のW3Cとしては,チャートを表わすためのボキャブラリは応用向けと考えて敢えて開発しなかったのかもしれません。あるいは実際のチャートの複雑さから,その抽象化を断念したのかもしれません。
実は,チャートのボキャブラリは,標準化団体のOASISでOpen Document Format(以下,ODFと略します)の一部として策定され,すでに国際標準であるISO/IEC 26300として承認されました。ODFは,テキスト,スプレッド・シート,プレゼンテーション,チャートなどからなるオフィス文書を表わすためのボキャブラリであり,Microsoft社のソフトウェア製品であるOfficeのキラーとなる無償ソフトウェアのOpenOfficeで利用できます。欧米では,OpenOfficeを支持する利用者は増加しているそうです。
一方,その勢いに危機を感じたMicrosoft社は,自社製品のOfficeについての文書形式をOffice Open XML File Format(以下,OOXMLと略します)として発表し,ODF勢力への対抗姿勢を明らかにしました。OOXMLは,ECMA(欧州電子計算機工業会)で承認されましたので,ODFの先行きは何とも怪しくなってきました。私には,ISOとECMAの権威の違いはともかく,それら二つの規格の優劣はまだ判断できませんが,印刷業としては,どちらのボキャブラリで表わされたオフィス文書が持ち込まれても対応しなければならないことは明らかで,あらかじめ十分に研究しておく必要があります。
この二つのオフィス文書のボキャブラリが統一されることがあるのか,統一が無理でも相互に変換できるのか,と様々な疑問が生じます。ちなみに,Microsoft社はODFとOOXMLとの相互変換を行うプラグインの開発を始めた,と発表しています。さらに,それらから複合文書への変換も気になるところです。複合文書は,XHTML,MathML,SVG,XFormsなどを組み合わせたWeb文書であり,オフィス文書から複合文書への変換は必ず求められるでしょう。もしかしたら近い将来,ODFやOOXMLを直接閲覧できるWebブラウザが登場するかもしれません。ともかく今後のオフィス文書の利用環境はXMLをベースに大きく変わると思われます。
さて,ここではオフィス文書のボキャブラリからチャートのボキャブラリに話を絞りたいと思います。あるデータ配列についてのチャートを表示する方式には,プログラムで駆動する方式とデータで駆動する方式があります。例えば,チャートが棒グラフの場合を想像してみましょう。前者は,棒グラフの一本いっぽんの長さや幅を順次描く命令を並べたプログラムです。後者は,データをプログラムで解釈して棒グラフの一本いっぽんの長さや幅を求め,それを命令のパラメータとして実行します。XML方式の利点として,そうしたデータの解釈を容易にするために,ボキャブラリで決めたタグをデータに付与できます。
図1は,一つのデータ配列から二通りのチャートが生成されることを示しています。これをデータ配列とチャートの条件を別々にボキャブラリに基づき記述して結びつけることで実現します。ここで,チャートの抽象化の程度が問題になります。チャートの抽象化が高いほど,チャートの種類や具体的なレンダリングが容易に変えられることになります。
▼図1 データとチャート
最初に,ODFによるチャートの記述を見てみましょう。図1のデータ配列をODFで表わした棒グラフの例を図2に示します。ここで,名前空間の「o」はoffice,「x」はtext,「t」はtable,「s」はsvg,「c」はchartにそれぞれ属します。このc:chartは,o:document-content/o:bodyの中に記述されます。
▼図2 ODFで表わした棒グラフ
<o:chart> <!-- チャート文書 -->
<c:chart s:width="8cm" s:height="7cm" c:class="c:bar"> <!-- チャートの種類 -->
<c:title><x:p>植生と土地資源</x:p></c:title> <!-- チャートの表題 -->
<c:legend c:legend-position="end" s:x="6.489cm" s:y="3.153cm"/> <!-- チャートの凡例 -->
<c:plot-area t:cell-range-address="Sheet1.$A$1:.$B$5"
c:table-number-list="0" s:x="0.16cm" s:y="0.928cm"
s:width="6.01cm" s:height="5.932cm"> <!-- チャートの表示領域 -->
<c:axis c:dimension="x" c:name="primary-x"> <!-- X軸 -->
<c:categories t:cell-range-address="local-table.A2:.A6"/> <!-- X軸のカテゴリ -->
</c:axis>
<c:axis c:dimension="y" c:name="primary-y"> <!-- Y軸 -->
<c:grid c:class="major"/> <!-- Y軸のグリッド -->
</c:axis>
<c:series> <!-- データの系列 -->
<c:data-point c:repeated="5"/> <!-- プロットの点数 -->
</c:series>
<c:series>
<c:data-point c:repeated="5"/>
</c:series>
<c:wall/> <!-- 背景 -->
<c:floor/> <!-- 3次元での底面 -->
</c:plot-area>
<t:table t:name="local-table"> <!-- データ配列 -->
<t:table-header-columns><t:table-column/></t:table-header-columns>
<t:table-columns>
<t:table-column t:number-columns-repeated="2"/>
</t:table-columns>
<t:table-header-rows> <!-- 表ヘッダの行 -->
<t:table-row>
<t:table-cell o:value-type="string"><x:p>植生と土地資源</x:p></t:table-cell>
<t:table-cell o:value-type="string"><x:p>1975年</x:p></t:table-cell>
<t:table-cell o:value-type="string"><x:p>2000年</x:p></t:table-cell>
</t:table-row>
</t:table-header-rows>
<t:table-rows> <!-- 表の行 -->
<t:table-row>
<t:table-cell o:value-type="string"><x:p>砂漠</x:p></t:table-cell>
<t:table-cell o:value-type="float" o:value="792"><x:p>792</x:p></t:table-cell>
<t:table-cell o:value-type="float" o:value="1284"><x:p>1284</x:p></t:table-cell>
</t:table-row>
<t:table-row>
<t:table-cell o:value-type="string"><x:p>密林</x:p></t:table-cell>
<t:table-cell o:value-type="float" o:value="2563"><x:p>2563</x:p></t:table-cell>
<t:table-cell o:value-type="float" o:value="2117"><x:p>2117</x:p></t:table-cell>
</t:table-row>
<t:table-row>
<t:table-cell o:value-type="string"><x:p>灌漑地</x:p></t:table-cell>
<t:table-cell o:value-type="float" o:value="223"><x:p>223</x:p></t:table-cell>
<t:table-cell o:value-type="float" o:value="273"><x:p>273</x:p></t:table-cell>
</t:table-row>
<t:table-row>
<t:table-cell o:value-type="string"><x:p>塩害の起こりうる灌漑地</x:p>
</t:table-cell>
<t:table-cell o:value-type="float" o:value="111.5"><x:p>111.5</x:p></t:table-cell>
<t:table-cell o:value-type="float" o:value="114.6"><x:p>114.6</x:p></t:table-cell>
<t:table-row>
<t:table-cell o:value-type="string"><x:p>農耕地</x:p></t:table-cell>
<t:table-cell o:value-type="float" o:value="1477"><x:p>1477</x:p></t:table-cell>
<t:table-cell o:value-type="float" o:value="1539"><x:p>1539</x:p></t:table-cell>
</t:table-row>
</t:table-rows>
</t:table>
</c:chart>
</o:chart>
次に,ODF以外のチャートのボキャブラリを概観してみましょう。表1に各種の代表的なチャートのボキャブラリをまとめてみました。所々に「-」の欄がありますが,これは私の解釈が不十分なためです。これらのボキャブラリが今後どうなるかは予断できません。チャートのボキャブラリの抽象化がさらに進めば,ODFやOOXMLも含めて淘汰されていくと思われます。表1は,紙面の都合上,各仕様の一部を割愛しています。
▼表1 チャートのボキャブラリ
意味 | ODFの要素 | xChart の要素 |
JMSL chart の要素 |
ChartSVG の要素 |
XML/SWF Chartsの要素 |
xfyの 要素 |
---|---|---|---|---|---|---|
チャートの ルート | o:chart | root | Chart | hsgraph | chart | chart |
チャートの 種類 | c:chart | pie, pie-3d, graph | Bar, Polar, Pie | charttype | chart_type | chart |
チャートの 表題 | c:title | title | ChartTitle | title | - | title |
チャートの 凡例 | c:legend | - | Legend | showlegend | legend_rect, legend_label | legend |
チャートの 背景 | c:wall, c:floor | - | Background | bgcolor | - | pattern |
チャートの 表示領域 | c:plot-area | plot-area | - | - | - | plot-area |
チャートの 座標軸 | c:axis | value-axis | AxisXY | xaxis(yaxis) | - | axes |
座標軸の カテゴリ | c:categories | category-axis | AxisX(AxisY) | - | - | axis |
座標軸の ラベル | - | axis-labels | AxisTitle | title | chart_value_text | axis |
座標軸の 最大値 | - | - | - | max | - | axis |
座標軸の 最小値 | - | - | - | min | - | axis |
座標軸の グリッド | c:grid | - | Grid | grid | chart_grid_h, chart_grid_v | axis-style |
大きな目盛り | - | major-tickmarks | MajorTick | - | - | axis-style |
小さな目盛り | - | minor-tickmarks | MinorTick | - | - | axis-style |
グリッドの 線 | - | grid-lines | - | line | - | axis-style |
データ配列 | t:table | - | - | series | chart_data | model |
データ配列の 系列 | c:series | serie | Data | serie | - | series |
系列を示す色 | - | - | - | color | series_color | series-style |
データ | t:table-cell | data-point | - | point | string, number | data |
データの ラベル | - | title | - | - | - | data-labels |
xChartは,XF Rendering Server 2007というレンダリング・ソフトウェアで提供される機能です。このソフトウェアは,C++,VB,ASP,.NET,Javaでアクセスでき,XSL-FO,SVG,xChartを入力すると,PDF,HTML,TIFF,JPEGなどの各種の形式で出力します。
JMSL chartは,Java表現のチャートをプログラミングするためのJavaライブラリです。このボキャブラリで興味深いことは,各種の属性をAttribute要素で与える点です。
ChartSVGは,SVG表現のチャートへXSL変換するためのXSLTスタイルシート集です。XSLTはバージョン1.1で,変換に必要な数学関数は外部のJavaで補います。
XML/SWF Chartsは,チャートをFlashで表示する仕組みで,PHP,ASP,Perlなどで利用できます。Flashのプログラミング言語は,JavaScript(ECMAScript)に基づくActionScriptです。このボキャブラリは,Flashで実現することから動的なレンダリング機能を含んでいます。
xfyは,複合文書オーサリングツールであり,バージョン1.3からチャートのボキャブラリをサポートするようになりました。xfyでは,様々なボキャブラリに対する処理をXVCD(XML Vocabulary Connection Descriptor)というXMLのボキャブラリで記述します。XVCDは,XSL変換によく似た機能を実現します。
ついでに,ボキャブラリを決めていないプログラム駆動方式のものを参考までに紹介します。
WebFXは,SVGをDOMでサポートしているWebブラウザ(MozillaやOperaなど)向けに,SVG表現のチャートをプログラミングするためのJavascriptライブラリです。
JpGraphは,チャートを作るためのPHPのライブラリです。
さて,すでにご存知かもしれませんが,XSLTを使ってチャートをSVG表現することが難しいという問題があります。それは円グラフのような曲線成分を持つSVG図形で表わす際に必要なsin()やcos()といった数学関数がXSLTの仕様にないことです。そのために,拡張関数や拡張要素を用いた様々な実現が試みられていますが,どのような拡張でも相互運用性が損なわれています。例えば,XSLTのバージョン1.1では,拡張要素を採用し,変換に必要な数学関数を外部のJavaで補っています。XSLTのバージョン2.0の勧告案ではその拡張要素は採用されず,XML Binding Language(XBL)2.0で行うようになっています。しかし,XBLが可能なXSLTが登場するまでは,やはり様々な方式で行うことになりそうです。
一般に,比べ合わせる数値を含む表はチャートで表現されることが多いようです。文書作成者は読者の便宜を図るために表の内容に合わせてチャートの種類を選び作成しています。しかし,ある読者にとっては,文書作成者によって選ばれたチャートの種類(例えば,棒グラフ)では理解しにくいかもしれません。こうした個人差を克服するには,読者側でその種類を閲覧時に自由に(例えば,折れ線グラフに)変更できるようにするしかありません。さらに元の表データにある情報(例えば,円グラフの数値)がチャートで割愛されているような事例もありますので,表としても読者側で表示できるようにすべきです。
つまり,あるデータについての「表としての表現」と「グラフとしての複数通りの表現」は可逆的(交替可能)でなければならない,と考えます。この考え方に立った表現は,従来の紙媒体では煩雑になり,紙面の都合でできないことが多いでしょうが,電子媒体であれば容易にできます。私は,この考え方をxfyで動くAutoChartで実現しました。なお,この機能は前述のxfyのチャート・ボキャブラリが開発される前に開発しましたので,互換性はありません。操作は簡単で,表をクリックしてメニューからチャートの種類を選ぶだけです。その表示領域内で表からチャート,あるいはチャートから表に交替します。ぜひお試しください。
▲このページのTOPへ