1

XML形式のデータがあります。例: _

<?xml version="1.0"?>
<TableSizes>
   <Table name="AuditLog" rows="13193925" reserved="4896864" data="2522592" indexSize="2373824" unused="448"/>
   <Table name="Customers" rows="7021839" reserved="3243392" data="1480640" indexSize="1762640" unused="112"/>
</TableSizes>

そのデータをクライアントで変換して表示したいと考えています。したがって、ユーザー エージェントに xml をフィードするときは、スタイルシートを提供します。

<?xml version="1.0"?>
<?xml-stylesheet type='text/xsl' href='databaseSize.xslt' media='all'?>
<TableSizes>
   <Table name="AuditLog" rows="13193925" reserved="4896864" data="2522592" indexSize="2373824" unused="448"/>
   <Table name="Customers" rows="7021839" reserved="3243392" data="1480640" indexSize="1762640" unused="112"/>
</TableSizes>

これにより、適切な HTML に変換されます。そして、それは十分に機能します。

しかし今、私はData Barsを追加したい:

現在、私はサーバー上で HTML を生成しています (つまり、サーバーはスタイルシートではなく、コンテンツを表示する方法を決定しています)。

ここに画像の説明を入力

各テーブル セルにbackground、計算されたグラデーション ストップを使用して、カスタム スタイルを適用する必要があります。

<TR>
    <TD>AuditLog
    <TD style="background: linear-gradient(to right, #658FC6 0%,rgb(255,255,255) 100%,rgb(255,255,255) 100%)">1319,,3925
    <TD style="background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) 100%,rgb(255,255,255) 100%)">489,,6864
    <TD>252,,2592
    <TD>237,,3824
    <TD>448
</TR>
<TR>
    <TD>Customers
    <TD style="background: linear-gradient(to right, #658FC6 0%,rgb(255,255,255) 51%,rgb(255,255,255) 100%)">702,,1839
    <TD style="background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) 62%,rgb(255,255,255) 100%)">324,,3392
    <TD>148,,0640
    <TD>176,,2640
    <TD>112
</TR>

明らかに、サーバー上で行うのではなく、スタイルシートによってクライアントでこれらすべてを実行したいのです。

可能？

注: そうでない場合: 問題ありません。そう言ってください。

これまでにどのような XSLT を持っていますか?

基本的に、なし。これまでのところ、XST はデータ バーを追加するために何もしません。

<TD><xsl:value-of select="@name"/>
<TD><xsl:value-of select="@rows"/>
<TD><xsl:value-of select="@reserved"/>
<TD><xsl:value-of select="@data"/>
<TD><xsl:value-of select="@indexSize"/>
<TD><xsl:value-of select="@unused"/>

私はダミー量のグラデーション描画コードを追加しました:

<TD><xsl:value-of select="@name"/>
<TD style='background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) 50%,rgb(255,255,255) 100%)'><xsl:value-of select="@rows"/>
<TD style='background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) 50%,rgb(255,255,255) 100%)'><xsl:value-of select="@reserved"/>
<TD><xsl:value-of select="@data"/>
<TD><xsl:value-of select="@indexSize"/>
<TD><xsl:value-of select="@unused"/>

厳密に言えば、私はその XSLT さえ持っていません。私が望むものを達成できないとき、私は XSLT 全体を書きたくありませんでした。上記の XSLT は、少なくとも最初に XSLT を持っているふりをするまで、質問に答えることはできないと誰かが示唆したときに、オンザフライで作成しました。

4

1 に答える 1

0

XSLT で非常に簡単に計算を行い、それをスタイル属性に入れることができます。

AuditLogとのそれぞれのテンプレートを作成しましたCustomers。次に、テンプレートで、計算で使用するCustomers前の値の変数を定義しました。AuditLogそこから、それぞれを使用して、グラデーションに必要なパーセントを計算しました（いくつかの簡単な「丸め」とともに）。

<xsl:value-of select="substring(((@rows div $PrevRow) * 100),1,2)"/>

したがって、XML を取得してこの XSL で変換すると、

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="xml" indent="yes" />

  <xsl:template match="Table[@name='AuditLog']">
    <tr>
      <td>
        <xsl:value-of select="@name"/>
      </td>
      <td style="background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) 100%,rgb(255,255,255) 100%)">
        <xsl:value-of select="@rows"/>
      </td>
      <td style="background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) 100%,rgb(255,255,255) 100%)">
        <xsl:value-of select="@reserved"/>
      </td>
      <td>
        <xsl:value-of select="@data"/>
      </td>
      <td>
        <xsl:value-of select="@indexSize"/>
      </td>
      <td>
        <xsl:value-of select="@unused"/>
      </td>
    </tr>
  </xsl:template>

  <xsl:template match="Table[@name='Customers']">
    <xsl:variable name="PrevRow" select="preceding-sibling::Table/@rows"/>
    <xsl:variable name="PrevReserved" select="preceding-sibling::Table/@reserved"/>
    <tr>
      <td>
        <xsl:value-of select="@name"/>
      </td>
      <td>
        <xsl:attribute name="style">
          <xsl:text>background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) </xsl:text>
          <xsl:value-of select="substring(((@rows div $PrevRow) * 100),1,2)"/>
          <xsl:text>%,rgb(255,255,255) 100%)</xsl:text>
        </xsl:attribute>
        <xsl:value-of select="@rows"/>
      </td>
      <td>
        <xsl:attribute name="style">
          <xsl:text>background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) </xsl:text>
          <xsl:value-of select="substring(((@reserved div $PrevReserved) * 100),1,2)"/>
          <xsl:text>%,rgb(255,255,255) 100%)</xsl:text>
        </xsl:attribute>
        <xsl:value-of select="@reserved"/>
        <br/>
        <xsl:value-of select="$PrevReserved"/>
      </td>
      <td>
        <xsl:value-of select="@data"/>
      </td>
      <td>
        <xsl:value-of select="@indexSize"/>
      </td>
      <td>
        <xsl:value-of select="@unused"/>
      </td>
    </tr>
  </xsl:template>

</xsl:stylesheet>

次の出力が得られます。

<tr>
  <td>AuditLog</td>
  <td style="background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) 100%,rgb(255,255,255) 100%)">13193925</td>
  <td style="background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) 100%,rgb(255,255,255) 100%)">4896864</td>
  <td>2522592</td>
  <td>2373824</td>
  <td>448</td>
</tr>
<tr>
  <td>Customers</td>
  <td style="background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) 53%,rgb(255,255,255) 100%)">7021839</td>
  <td style="background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) 66%,rgb(255,255,255) 100%)">3243392<br/>4896864</td>
  <td>1480640</td>
  <td>1762640</td>
  <td>112</td>
</tr>
于 2013-09-25T21:29:49.977 に答える