AnyChart圖表控件使用指南(三)

坐標軸是圖表不可或缺的元素，坐標軸控制着值、參數比例、網格、軸標簽、軸刻度、坐標軸線等，anychart為坐標軸提供了多種屬性，開發人員可 以根據自己的需求進行靈活的設置，可控制坐標軸的幾乎每一個可視元素，在這一節我們主要討論AnyChart坐標軸的各個元素設置。

關於AnyChart圖表的介紹和在線事例請查看>>

1.坐標軸定義以及任何設置都是在<chart_settings>節點下的<axes>子節點里進行，像下面的代碼：

<chart_setttings>
  <axes>
    <x_axis>
    </x_axis>
    <y_axis>
    </y_axis>
    <extra>
      <y_axis name="y2" />
    </extra>
  </axes>
</chart_setttings>

2.設置坐標軸標題：使用AnyChart可以設置任何軸的標題，以及控制標題的位置、字體使用的關鍵詞，所有軸標題相關的設置都是 在<y_axis><title> 或 <x_axis><title>節點里，如下事例代碼：

<axes>
  <x_axis>
    <title>
      <text>Sample X axis name</text>
      <font bold="Yes" />
    </title>
  </x_axis>
  <y_axis position="Opposite">
    <title align="Near">
      <text>Y axis from %DataPlotYMax to %DataPlotYMin</text>
    </title>
  </y_axis>
</axes>

以上代碼里我們設置了X軸和Y軸標題，並且設置X軸標題為粗體，Y軸標題中使用到了%DataPlotYMax 和%DataPlotYMin關鍵詞
3.軸位置：Anychat支持放置Y軸和X軸在任何一邊，只需要設置<y_axis>節點里的position屬性為"Opposite"或者"Normal"：

4.軸標簽：如果要顯示軸標簽需要設置<labels enabled="true"/>，還可以指定標簽顯示的外觀效果，標簽離軸線的距離，標簽的顯示角度等

   a) 正常模式顯示標簽

<y_axis>
  <labels display_mode="Normal" />
</y_axis>

b)旋轉標簽：

<y_axis>
  <labels display_mode="Normal" rotation="90" />
</y_axis>

c)標簽交錯顯示：

<y_axis>
  <labels display_mode="Stager" />
</y_axis>

d)軸標簽位置，標簽可以放置在軸的左側或者右側

<y_axis>
  <labels align="Inside" position="Inside" />
</y_axis>

e)軸標簽和軸的間隔

<y_axis>
  <labels padding="10" />
</y_axis>

f)軸標簽字體和樣式等

<y_axis>
<labels>
  <font family="Courier" size="12" color="Red" bold="True" italic="False" underline="False" render_as_html="False">
    <effects enabled="true">
      <drop_shadow enabled="true" />
    </effects>
  </font>
</labels>
</y_axis>

g)設置是否顯示起始和結束標簽以及十字標簽

<y_axis>
  <labels show_first_label="False" show_last_label="False" show_cross_label="True" />
</y_axis>

h)軸標簽的格式化會在以后詳細介紹 

5. 坐標軸線外觀設置以及坐標軸分段

<axes>
  <y_axis>
    <line color="Red" />
    <zero_line color="Red" />
  </y_axis>
  <x_axis>
    <line_style color="Red" />
    <zero_line_style color="Red" />
  </x_axis>
</axes>

6.軸刻度：坐標軸刻度分為主刻度和次刻度，anychart可完全控制主刻度和次刻度間隔比例、外觀和位置等

     1)設置主刻度和次刻度是否顯示：

<y_axis>
    <major_tickmark enabled="True" />
    <minor_tickmark enabled="False" />
  </y_axis>

2)設置主刻度和次刻度位置

<y_axis>
    <major_tickmark enabled="True" outside="True" inside="False" opposite="False" />
    <minor_tickmark enabled="False" outside="False" inside="True" opposite="False" />
  </y_axis>

3)坐標軸比例分為線性(Linear)和對數(Logarithmic)，如下：

<axes>
    <y_axis>
      <scale type="Logarithmic" />
    </y_axis>
    <x_axis>
      <scale type="Linear" />
    </x_axis>
  </axes>

4)   坐標軸比例模式，各種比例模式適合哪些序列類型請看下表：

比例模式	圖表序列類型
Normal	適合所有序列類型
Stacked	適合(Bar, Line, Area等)
PercentStacked	適合(Bar, Line, Area等)
Overlay	適合 柱狀圖
SortedOverlay	適合 柱狀圖、氣泡圖

比例模式設置如下：

<y_axis>
     <scale mode="Stacked"/>
</y_axis>

5)設置坐標軸最大值和最小值

<y_axis>
  <scale maximum="100" minimum="-50"/>
</y_axis>

 6)設置坐標軸主刻度和次刻度的間隔步數，如下：

<y_axis>
  <scale major_interval="20" minor_interval="2"/>
</y_axis>

7)設置坐標軸比例倒置顯示，也就是從上到下遞增顯示，如：

<y_axis>
    <scale inverted="true"/>
</y_axis>

8)設置軸位置，如下圖

只需要設置：

<x_axis> 
<scale crossing="0"/> 
</x_axis>

7.設置圖表網格線

    (一)設置是否顯示主網格線和次網格線

<y_axis>
  <major_grid enabled="True"/>
  <minor_grid enabled="True"/>
</y_axis>

     (二)設置網格線樣式

<y_axis>
  <major_grid enabled="True">
    <line color="Black"/>
  </major_grid>
  <minor_grid enabled="True">
    <line color="Black" opacity="0.5" dashed="True"/>
  </minor_grid>
</y_axis>

8.還有很多細節方面的這里就不在一 一說明，有興趣的可以下載試用版，查看控件提供的幫助文檔。