今天給大家帶來的是Anychart各種圖的介紹，主要是教大家如何配出自己需要的圖形出來。

?

• 柱狀圖（Column Chart）

柱狀圖是項目中最常用的圖形之一，他的指標在X軸方向，每個指標對應的值在Y軸，Anychart的柱狀圖支持2D和3D效果。【 官方參考文檔 】

如下代碼片段，是一個簡單的柱狀圖的XML配置，要生成一個柱狀圖，你就必須配置<chart>的plot_type屬性為"CategorizedVertical"，并且要配置<data_plot_settings>標簽的屬性default_series_type為"Bar"，這樣整個圖就是柱狀了。

?

      <?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <charts>
    <chart plot_type="CategorizedVertical">
      <data_plot_settings default_series_type="Bar">
        <bar_series>
          <tooltip_settings enabled="True" />
        </bar_series>
      </data_plot_settings>
      <data>
        <series name="Quarter 1">
          <point name="John" y="10000" />
          <point name="Jake" y="12000" />
          <point name="Peter" y="18000" />
          <point name="James" y="11000" />
          <point name="Mary" y="9000" />
        </series>
      </data>
    </chart>
  </charts>
</anychart>
    

??

?

?

• 條形圖（Bar Chart）

條形圖其實是柱狀圖旋轉后的效果，指標在Y軸了，而數據在X軸，同時條形圖也支持2D和3D效果。【 官方參考文檔 】

條形圖的配置與柱狀圖也非常類似，你只需要把柱狀圖的plot_type屬性修改為"CategorizedHorizontal"即可顯示成條形圖。

?

      <?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <charts>
    <chart plot_type="CategorizedHorizontal">
      <data_plot_settings default_series_type="Bar">
        <bar_series>
          <tooltip_settings enabled="True" />
        </bar_series>
      </data_plot_settings>
      <data>
        <series name="Quarter 1">
          <point name="John" y="10000" />
          <point name="Jake" y="12000" />
          <point name="Peter" y="18000" />
          <point name="James" y="11000" />
          <point name="Mary" y="9000" />
        </series>
      </data>
    </chart>
  </charts>
</anychart>
    

?

?

?

• 線形圖（Line Chart）

線形圖分折線圖和曲線圖，常用于數據發展趨勢分析【 官方參考文檔 】

看下面的代碼片段，這是配置折線圖的方法，你就必須配置<chart>的plot_type屬性為"CategorizedVertical"，并且要配置<data_plot_settings>標簽的屬性default_series_type為"Line"，這樣整個圖就是折線圖了。那么如果你將plot_type屬性設置成"CategorizedHorizontal"，結果也是折線，只是折線的指標在Y軸，而數據在X軸了。

?

      <?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <charts>
    <chart plot_type="CategorizedVertical">
      <data_plot_settings default_series_type="Line" />
      <data>
        <series name="2004 Sales">
          <point name="January" y="12000" />
          <point name="February" y="15000" />
          <point name="March" y="16000" />
          <point name="April" y="15000" />
          <point name="May" y="14000" />
        </series>
      </data>
    </chart>
  </charts>
</anychart>
    

?

?

?

曲線圖與折線圖配置類似，只需要將default_series_type屬性修改為"Spline"即可，看下面代碼

?

      <?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <charts>
    <chart plot_type="CategorizedVertical">
      <data_plot_settings default_series_type="Spline" />
      <data>
        <series name="2004 Sales">
          <point name="January" y="12000" />
          <point name="February" y="15000" />
          <point name="March" y="16000" />
          <point name="April" y="15000" />
          <point name="May" y="14000" />
        </series>
      </data>
    </chart>
  </charts>
</anychart>
    

?

?

?

• 餅圖和圓環圖（Pie and Donut Chart）

餅狀圖在項目中應用也很廣泛，主要用于展示指標占用比例，Anychart的餅圖也支持2D和3D兩種。【 官方參考文檔 】

餅圖的代碼如下，不同于前面幾種圖，餅狀圖只需要配置<chart>的plot_type屬性為"Pie"即可。

?

      <?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <charts>
    <chart plot_type="Pie">
      <data>
        <series name="Year 2003" >
          <point name="Department Stores" y="637166" />
          <point name="Discount Stores" y="721630" />
          <point name="Men's/Women's Specialty Stores" y="148662" />
          <point name="Juvenile Specialty Stores" y="78662" />
          <point name="All other outlets" y="90000" />
        </series>
      </data>
    </chart>
  </charts>
</anychart>
    

?

?

?

圓環圖也是非常簡單，只需要配置<chart>的plot_type屬性為"Doughnut"即可

?

      <?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <charts>
    <chart plot_type="Doughnut">
      <data>
        <series name="Year 2003" >
          <point name="Department Stores" y="637166" />
          <point name="Discount Stores" y="721630" />
          <point name="Men's/Women's Specialty Stores" y="148662" />
          <point name="Juvenile Specialty Stores" y="78662" />
          <point name="All other outlets" y="90000" />
        </series>
      </data>
    </chart>
  </charts>
</anychart>
    

?

?

?

介紹餅狀圖的一個特殊功能：Exploded Slices。餅圖默認如果被點擊的話，被點擊的部分會伸出來突出顯示。而且你也可以設置圖形顯示時默認突出顯示哪一塊或哪幾塊。

如下面的代碼，我設置了point name為Department開頭的和All開頭的兩個指標屬性exploded為"true"，那么結果就是渲染餅圖后，這兩個被設置的指標突出向外顯示了。

?

      <?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <charts>
    <chart plot_type="Pie">
      <data>
        <series name="Year 2003" >
          <point name="Department Stores" y="637166" exploded="True"/>
          <point name="Discount Stores" y="721630" />
          <point name="Men's/Women's Specialty Stores" y="148662" />
          <point name="Juvenile Specialty Stores" y="78662" />
          <point name="All other outlets" y="90000" exploded="True"/>
        </series>
      </data>
    </chart>
  </charts>
</anychart>
    

?

?

?

不過Anychart的餅圖突出顯示有一個不滿意的地方就是你選擇了一塊突出顯示后，再選擇別的指標，原來被選擇的指標不會自動收回。

另外有的用戶不希望點擊餅圖時突出顯示，則需要配置一個<pie_series>標簽并且設置explode_on_click屬性為"Flase"即可。另外explode屬性是指突出顯示多遠，值越大突出顯示得越遠。

?

      <?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <charts>
    <chart plot_type="Pie">
      <data>
        <series name="Year 2003" palette="Default">
          <point name="Department Stores" y="637166" />
          <point name="Discount Stores" y="721630" />
          <point name="Men's/Women's Specialty Stores" y="148662"/>
          <point name="Juvenile Specialty Stores" y="78662"/>
          <point name="All other outlets" y="90000" />
        </series>
      </data>
      <data_plot_settings>
        <pie_series sort="Desc" explode_on_click="False" explode="10"/>
      </data_plot_settings>
    </chart>
  </charts>
</anychart>
    

?

?

?

• 標記圖（Marker Chart）

標記圖其實是指圖上打小點這樣的標記而組成的圖，我的項目里用過一次，用于表示不同時間段用戶登錄次數和在線時長的。【 官方參考文檔 】

廢話不多說，先上XML，看下面的代碼：其中<marker_series>是可以不用寫的，這里寫了就給大家做個解釋，<marker>的size屬性表示標志在圖上的默認大小，而<hover>下面的marker size是標識鼠標移動到標志上時標志顯示的大小，下面代碼從10變成20有一種放大的效果。

而設置標志圖的代碼也只有兩塊，一塊是設置plot_type另一塊是設置default_series_type為"Marker"即可。

?

      <?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <charts>
    <chart plot_type="CategorizedVertical">
      <data_plot_settings default_series_type="Marker">
        <marker_series>
          <marker_style>
            <marker size="10" />
            <states>
              <hover>
                <marker size="20" />
              </hover>
            </states>
          </marker_style>
        </marker_series>
      </data_plot_settings>
      <data>
        <series name="ACME">
          <point name="2000" y="1100" />
          <point name="2001" y="880" />
          <point name="2002" y="1100" />
          <point name="2003" y="1500" />
          <point name="2004" y="921" />
          <point name="2005" y="1000" />
          <point name="2006" y="1400" />
        </series>
      </data>
    </chart>
  </charts>
</anychart>
    

?

?

?

• 面積圖（Area Chart）

面積圖的配置與前面的也是非常類似的，除了配置plog_type以外，再配置default_series_type即可，如下所示。【 官方參考文檔 】

      <?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <charts>
    <chart plot_type="CategorizedVertical">
      <data_plot_settings default_series_type="Area" />
      <data>
        <series name="2004 Sales">
          <point name="January" y="12000" />
          <point name="February" y="15000" />
          <point name="March" y="16000" />
          <point name="April" y="15000" />
          <point name="May" y="14000" />
        </series>
      </data>
    </chart>
  </charts>
</anychart>
    

?

?

• 雷達圖（Radar Chart）

雷達圖的應用場景通常是統計某個人的多維能力值，通過雷達圖能很形象看出這個人的擅長和需要彌補的地方。【 官方參考文檔 】

雷達圖的配置也是非常簡單，用戶只需要配置<chart>標簽的plot_type屬性為Radar即可

      <?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <charts>
    <chart plot_type="Radar">
      <data>
        <series name="Spendings">
          <point name="Administration" y="22" />
          <point name="Sales" y="34" />
          <point name="Marketing" y="16" />
          <point name="Research" y="12" />
          <point name="Support" y="38" />
          <point name="Development" y="47" />
        </series>
      </data>
    </chart>
  </charts>
</anychart>
    

?

?

雷達圖有很多種樣式，雷達圖點與點之間是通過直接連接的，如果希望以曲線連接則需要設置<radar>標簽的 use_polar_coords屬性為"true"，如下代碼

      <?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <charts>
    <chart plot_type="Radar">
      <data>
        <series name="Spendings">
          <point name="Administration" y="22" />
          <point name="Sales" y="34" />
          <point name="Marketing" y="16" />
          <point name="Research" y="12" />
          <point name="Support" y="38" />
          <point name="Development" y="47" />
        </series>
      </data>
      <data_plot_settings>
        <radar use_polar_coords="true" />
      </data_plot_settings>
    </chart>
  </charts>
</anychart>
    

?

?

那么如果你希望你的雷達圖中的連線像面積圖那樣顯示，那么可以像下面這樣在<series>標簽增加一個type屬性"Area"

      <?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <charts>
    <chart plot_type="Radar">
      <data>
        <series name="Spendings" type="Area">
          <point name="Administration" y="22" />
          <point name="Sales" y="34" />
          <point name="Marketing" y="16" />
          <point name="Research" y="12" />
          <point name="Support" y="38" />
          <point name="Development" y="47" />
        </series>
      </data>
    </chart>
  </charts>
</anychart>
    

?當然，Anychart的雷達圖支持的效果不止這些，如果需要更多的樣式，請參見官方的 幫助文檔

?

堆疊圖（柱狀為例）（Stacked Bar/Column Chart）

Anychart支持柱狀的堆疊和面積圖的堆疊，這里就只介紹柱狀的堆疊，面積的堆疊與之類似。當然也可以參見官方的幫助文檔：【 柱狀堆疊圖 】【 面積堆疊圖 】

下面是一個簡單的堆疊圖，需要注意的是堆疊圖比如是存在多個series的，每個series你可以當作一組分類，每個series下的point指標數量都是相同的，并且他們的name一一對應，最后你看到的效果就會是相同name的指標堆疊在一起了。

柱狀堆疊圖與常規的柱狀圖唯一的區別就是在<y_axis>標簽下有一個<scale mode="Stacked" />，這個標簽決定了柱狀圖是以堆疊還是以常規顯示。

      <?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <charts>
    <chart plot_type="CategorizedVertical">
      <data_plot_settings default_series_type="Bar"/>
      <data>
        <series name="Ice Cream">
          <point name="Winter" y="12000" />
          <point name="Spring" y="13000" />
          <point name="Summer" y="25000" />
          <point name="Autumn" y="16000" />
        </series>
        <series name="Chocolate Bars">
          <point name="Winter" y="12000" />
          <point name="Spring" y="12000" />
          <point name="Summer" y="15000" />
          <point name="Autumn" y="16000" />
        </series>
        <series name="Coke">
          <point name="Winter" y="10000" />
          <point name="Spring" y="17000" />
          <point name="Summer" y="19000" />
          <point name="Autumn" y="16000" />
        </series>
      </data>
      <chart_settings>
        <axes>
          <y_axis>
            <scale mode="Stacked" />
          </y_axis>
        </axes>
      </chart_settings>
    </chart>
  </charts>
</anychart>
    

?最后我們看相同data的情況下，堆疊圖和常規柱狀圖的效果：

?

?

• 結束總結

Anychart的圖類型是比較豐富的，本篇只介紹了幾種常用的圖，并且也只是簡單介紹了如何配置他們，如果想了解更多的圖類型，大家可自行從 官方文檔 中去了解學習。

上面的XML例子是最最簡單的情況下的效果，大家會發現圖中沒有自定義的標題、沒有冒泡提示、沒有圖例等，別擔心，后續我會慢慢與大家分享。

?