使用AnyChart設置閾值及應用講解

閾值主要根據一些預先定義的條件，用於顏色圖表元素，讓你的數據輸出可視化。

創建閾：

若要創建閾需要在 <chart>節點裏創建 <thresholds>節點，並在地方一個或幾個條件命名閾值：

<chart>
  <thresholds>
    <threshold name="SampleThreshold">
      <condition name="Excellent Rating" type="greaterThanOrEqualTo" value_1="{%YValue}" value_2="10000" color="Red" />
    </threshold>
  </thresholds>
</chart>

簡單的定義語法如下：定義條件

<threshold name="SampleThreshold">
  <condition name="From 100 to 200" type="between" value_1="{%YValue}" value_2="100" value_3="200" color="Red" />
  <condition name="Negative" type="lessThen" value_1="{%YValue}" value_2="0" color="Blue" />
</threshold>

還可以使用{%customattributename}自定義屬性值。在上面的例子中，所有的從100到200的值將會被顯示爲紅色，所有的負值，將會被顯示爲藍色。就如你所看見的，你可以在value_1、value_2 、value_3中使用關鍵字，你可以使用在本文的末尾找到的關鍵字屬性完整列表。

在下面的示例中，我們將創建柱形圖來顯示當月不同經理的銷售額，小於10.000的將會用暗紅色表示，從10.000到20.000的將會又能夠金色表示，大於20.000的將會用綠色表示，tooltip將會顯示銷售數據和評估。

條件類型：

這裏有8種條件類型，下面的表格中就是浙西條件類型和相關的描述：

一旦定義了閾值，你就可以將它們應用到圖表上所有的數據上或數據列，想要實現這一點，是需要設置一下閾值屬性的<data>或<series>節點，現在就來看看AnyChart閾值應用。

<data threshold="Threshold1">
  <series name="Series1" threshold="Threshold2">
  </series>
  <series name="Series2">
  </series>
</data>

閾值自定義屬性

你可以將任何的數據添加到條件上邊來使用這些在標籤上或tooltip上的數據，比如說，你可以描述一個條件，然後將這個條件放在標籤裏面。

爲了添加自定義屬性到條件，需要在<condition>中創建<attribute>節點，並將一些<attribute>節點放在你需要的地方。

<thresholds>
  <threshold name="TempreatureTreshold">
    <condition name="c1" type="lessThanOrEqualTo" value_1="{%YValue]" value_2="127" color="Red">
      <attributes>
        <attribute name="Description">The price is less or equal than 127 - and that is a very dangerous situation!</attribute>
      </attributes>
    </condition>
    <condition name="c2" type="greaterThan" value_1="{%YValue}" value_2="127" color="Yellow">
      <attributes>
        <attribute name="Description">The price is greater than 127 - and that is fine.</attribute>
      </attributes>
    </condition>
  </threshold>
</thresholds>

在標籤和Tooltips中使用閾值

在下面的示例中，將會看見顯示發動機溫度的區域圖，使用閾值，標籤和tooltip來定義閾值的顏色，閾值使用描述和細節閾值條件的自定義屬性。

可以按照下面的代碼自定義條件屬性：

<thresholds>
  <threshold name="TempreatureTreshold">
    <condition name="c1" type="lessThanOrEqualTo" value_1="{%YValue}" value_2="153" color="Black">
      <attributes>
        <attribute name="Description">DANGER!</attribute>
        <attribute name="Details">The Temprature is less than or equal to 154.</attribute>
      </attributes>
    </condition>
  </threshold>
</thresholds>

在標籤中設置使用的條件數據：

label_settings enabled="true" rotation="90">
  <format>{%ConditionDescription}</format>
</label_settings>

在tootip中顯示腳本

<tooltip_settings enabled="true">

<format>Temp: {%YValue}

{%ConditionDescription} {%ConditionDetails}</format>

</tooltip_settings>

參考資料：Flash圖表AnyChart應用教程