XQuery/Google 图表子弹条

动机

要显示一个子弹图表来显示系统参数的当前值及其安全和危险范围。

子弹条

这是现在已弃用的 " Google 图表 API 支持的图表类型之一，该 API 从 URL 参数构建图表。

示例 URL

 http://chart.apis.google.com/chart?cht=bhs&chs=150x30&chd=t:70&chm=r,ff0000,0,0.0,0.5%7Cr,ffff00,0,0.5,0.75%7Cr,00A000,0,0.75,1.0%7Cr,000000,0,0.8,0.81&chco=000000&chbh=10

示例屏幕图像

声明式 XML 表示

图表设计的 XML 表示可能是

<chart >
   <type>bar-gauge</type>
   <height>30</height>  <!-- in pixels -->
   <width>150</width>    <!-- in pixels -->
   <danger-threshold>50</danger-threshold>  <!-- end of danger level -->
   <danger-color>ff0000</danger-color>
   <warning-threshold>75</warning-threshold>   <!-- end of warning level -->
   <warning-color>ffff00</warning-color>
   <ok-threshold>100</ok-threshold>   <!-- end of ok level -->
   <ok-color>00ff00</ok-color>
   <target-value>90</target-value>
</chart>

Google 图表表示

当与当前值一起提供时，必须将其转换为以下 URL

http://chart.apis.google.com/chart?
 cht=bhs&
 chs=150x30&
 chd=t:70&
 chm=r,ff0000,0,0.0,0.5|
   r,ffff00,0,0.5,0.75|
   r,00A000,0,0.75,1.0|
   r,000000,0,0.8,0.81&
chco=000000&chbh=10

示例 XQuery 函数

此函数接受图表规范和当前值，并生成相应的 Google 图表 URL。

请注意，危险、警告和良好条（红色、黄色和绿色）的宽度以百分比表示，从 0 到 100。

declare function local:bullet-bar($spec,$current-value) {
let $danger-width-percent := $spec/danger-threshold div 100
let $warn-width-percent := $spec/warning-threshold div 100
let $ok-width-percent := $spec/ok-threshold div 100
let $target-width-percent := $spec/target-value div 100
let $target-plus-one := $target-width-percent + 0.01
 return concat(
   'http://chart.apis.google.com/chart?cht=bhs&amp;chs=',
    $spec/width,
    'x',
    $spec/height,
    '&amp;chd=t:',$current-value, 
    '&amp;chm=r,',$spec/danger-color,',0,0.0,', $danger-width-percent,
    '|r,',$spec/warning-color,',0,', $danger-width-percent, ',', $warn-width-percent,
    '|r,',$spec/ok-color,',0,', $warn-width-percent, ',', $ok-width-percent,
    '|r,000000,0,', $target-width-percent, ',', $target-plus-one, 
    '&amp;chco=000000&amp;chbh=',
    round($spec/height * 0.6)
  )
};

生成子弹条

let $current-value := 70
let $url := local:bullet-bar($bar-spec,$current-value)
return
    <div>
        <h2>Example bullet bar</h2>
         <div> <img src="{$url}"/></div>
    </div>

执行