如果數據過多的時候，圖表因為只有固定寬度，無法呈現較好的效果，這時候滾動條的作用就出來了，基于Flash格式的AnyChart支持圖表內出滾動條（目前HTML5尚不支持）。

AnyChart水平和豎直方向均支持滾動條，以下是出滾動條的設置，<y_axis>中的<zoom>表示在y軸出滾動條，<x_axis>中的<zoom>表示在x軸出滾動條。

      <axes>
  <scroll_bar_settings>
    <vert_scroll_bar>
    </vert_scroll_bar>
    <horz_scroll_bar>
    </horz_scroll_bar>
  </scroll_bar_settings>
  <y_axis>
    <zoom enabled="" show_scroll_bar="" start="" end="" visible_range="" visible_range_unit="">
    </zoom>
  </y_axis>
  <x_axis>
    <zoom />
  </x_axis>
</axes>
    

?

看下面這個例子，讓X軸產生一個滾動條，滾動條默認從第一個point name開始，但是如果設置了start屬性就表示滾動條會往中間移動一點位置，visible_range表示一個屏幕下顯示多少個point name，下面設置的4，表示一個屏幕下會有4個point name顯示。

      <?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <charts>
    <chart>
      <chart_settings>
        <axes>
          <x_axis>
            <zoom enabled="true" inside="true" start="2.5" visible_range="4" />
          </x_axis>
        </axes>
      </chart_settings>
      <data>
        <series>
          <point name="Jan" y="2" />
          <point name="Feb" y="1" />
          <point name="Mar" y="3" />
          <point name="Apr" y="4" />
          <point name="May" y="4" />
          <point name="Jun" y="5" />
          <point name="Jul" y="6" />
          <point name="Aug" y="7" />
          <point name="Sep" y="6" />
          <point name="Oct" y="5" />
          <point name="Nov" y="8" />
          <point name="Dec" y="10" />
        </series>
      </data>
    </chart>
  </charts>
</anychart>
    

最終效果圖如下

?

?

同理，下面這段代碼是在Y軸顯示滾動條

      <y_axis>
  <zoom enabled="true" inside="true" start="65" end="95" />
</y_axis>
    

?

?

?

滾動條設置功能本身很簡單，但是我只能說AnyChart的滾動條功能并不智能，因為它必須讓開發人員去設置什么時候出滾動條，滾動條出多大，所以如果用到大項目中的時候，開發人員還必須通過js判斷頁面寬度，再根據傳入的值去動態創建滾動條（反正我是這么做的）。

希望AnyChart在新的版本能夠支持設置圖的最小間距（比如柱子的最小間距），如果超出最小間距則自動出滾動條。

AnyChart滾動條更多的文檔參考以下地址： http://www.anychart.com/products/anychart/docs/users-guide/index.html?Zooming-And-Scrolling.html