チャートで HTML を使って文字を解析する

  • 作成者:ayuan0625
  • 編集回数:26次
  • 最終更新:FRInternational 于 2022-01-12
  • 一.概要

    1.応用シーン

    HTMLコードでチャートタイトルや凡例、ラベルなどのカスタム設定ができます。htmlでテキストの内容を解析に設定すると、フロントエンドでプレビューする際、タイトルや凡例、ラベルなどのスタイルはHTMLコードに従って変わります。

    注1:テキストでHTMLコードを書き込む際、数式ではなく、テキストボックスで編集します。

    注2:プレビューの際はすべてのHTML文による解析をサポートしますが、エクスポートの際は一部の文だけサポートします。

    タイトルを例に、HTMLコードで折れ線グラフのタイトルをカスタム設定します。最終結果は下記の図の通りです。

    02.png

    2.機能画面

    1.タイトル

    03.png

    2.凡例(地図及びドリル地図の形式がグラデーションまたは段階設定の場合)

    04.png

    3.ラベル

    05.png

    4.座標軸

    06.png

    5.条件属性-データポイントのヒント

    07.png

    6.条件属性-ラベル

    08.png

    3.エクスポートサポート

    2020-07-06及びそれ以降のバージョンでは、JARファイルがHTMLを使って解析したテキストのエクスポート(チャートは画像やExcel、PDFファイルなどの形でエクスポート)をサポートします。下記の画像のように、例のチャートをExcelにエクスポートする際、HTMLを使って解析したタイトルは順調にエクスポートされます。

    09.png

    現在のバージョンは一部のラベルとインラインスタイルをサポートしています。詳しくは下記のとおりです。

    • ラベルのみ:<b>、<strong>、<i>、<em>、<br/>、<span>

    • <span>内のインラインスタイルのみ

    • サポートしているインラインスタイル:font-size、font-family、font-style、font-weight、colorfont-weightは、boldのみ、bolderはサポートしていません

    • ラベル間のネストをサポートしていません。例:<span>内容<span>内容</span></span>

    • HTMLでは水平表示のみ。回転をサポートしていません。

    二.例示

    1.カスタムタイトル

    下記の画像のように、属性パネルでスタイル-タイトルを選び、タイトルを表示にチェックを入れ、テキストボックスにHTMLコードを入力し、HTMLでテキストの内容を解析をクリックします。

    03.png

    HTMLコードは下記のとおりです。

    <span style="font-size:16px; font-family:Verdana; font-style:italic; font-weight:bold; color: grey;">年度販売量統計</span>

    2.効果プレビュー

    帳票を保存し、改ページプレビューをクリックすると、下記のようにカスタム設定されたタイトルが表示されます。

    02.png

    3.チャートのエクスポート

    改ページプレビューの画面で、帳票をExcelファイルにエクスポートします。

    10.png

    ファイル内のチャートは下記のように表示されます。

    09.png

    三.HTMLを使ったテキスト解析の応用

    ご理解と参考のために、ここではよくあるHTMLを使ったテキスト解析の書き方について紹介します。

    1.単一ラベルの1行表示

    <span style="color:blue;">新規チャートタイトル</span>

    <b>新規チャートタイトル</b>

    <i>新規チャートタイトル</i>

    <span style="font-size:16px; font-family:Verdana; font-style:italic; font-weight:bold; color: #00f;">新規チャートタイトル</span>

    2.単一ラベルの改行表示

    <span style="color:blue;">新規<br>チャートタイトル</span>

    <span style="color:blue;">新規<br>チャート<br>タイトル</span>

    <em>新規チャート<br>タイトル</em>

    3.複数のラベルの1行表示

    <b>新規</b><i>チャート</i>

    <b>新規</b><i>チャート</i><em>タイトル</em>

    <span style="color:blue;">新規</span><i>チャート</i><em>タイトル</em>

    4.複数のラベルの改行表示

    <b>新規<br>チャート</b><br>

    <b>新規<br>チャート</b><br><em>タイトル</em>

    <b>新規</b><i>チャート</i><br><em>タイトル</em>

    Attachment List


    Theme: FineReport チャート
    既に最初
    既に最後
    • Helpful
    • Not helpful
    • Only read