老司机午夜免费精品视频,少妇特黄a一区二区三区,蜜桃视频在线观看免费视频

今天給大家?guī)淼氖茿nychart各種圖的介紹，主要是教大家如何配出自己需要的圖形出來。

柱狀圖（Column Chart）

柱狀圖是項(xiàng)目中最常用的圖形之一，他的指標(biāo)在X軸方向，每個(gè)指標(biāo)對應(yīng)的值在Y軸，Anychart的柱狀圖支持2D和3D效果。【官方參考文檔】

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

      <?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）

條形圖其實(shí)是柱狀圖旋轉(zhuǎn)后的效果，指標(biāo)在Y軸了，而數(shù)據(jù)在X軸，同時(shí)條形圖也支持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）

線形圖分折線圖和曲線圖，常用于數(shù)據(jù)發(fā)展趨勢分析【官方參考文檔】

看下面的代碼片段，這是配置折線圖的方法，你就必須配置<chart>的plot_type屬性為"CategorizedVertical"，并且要配置<data_plot_settings>標(biāo)簽的屬性default_series_type為"Line"，這樣整個(gè)圖就是折線圖了。那么如果你將plot_type屬性設(shè)置成"CategorizedHorizontal"，結(jié)果也是折線，只是折線的指標(biāo)在Y軸，而數(shù)據(jù)在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>

餅圖和圓環(huán)圖（Pie and Donut Chart）

餅狀圖在項(xiàng)目中應(yīng)用也很廣泛，主要用于展示指標(biāo)占用比例，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>

圓環(huán)圖也是非常簡單，只需要配置<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>

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

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

      <?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的餅圖突出顯示有一個(gè)不滿意的地方就是你選擇了一塊突出顯示后，再選擇別的指標(biāo)，原來被選擇的指標(biāo)不會(huì)自動(dòng)收回。

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

      <?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>

標(biāo)記圖（Marker Chart）

標(biāo)記圖其實(shí)是指圖上打小點(diǎn)這樣的標(biāo)記而組成的圖，我的項(xiàng)目里用過一次，用于表示不同時(shí)間段用戶登錄次數(shù)和在線時(shí)長的。【官方參考文檔】

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

而設(shè)置標(biāo)志圖的代碼也只有兩塊，一塊是設(shè)置plot_type另一塊是設(shè)置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>

雷達(dá)圖（Radar Chart）

雷達(dá)圖的應(yīng)用場景通常是統(tǒng)計(jì)某個(gè)人的多維能力值，通過雷達(dá)圖能很形象看出這個(gè)人的擅長和需要彌補(bǔ)的地方。【官方參考文檔】

雷達(dá)圖的配置也是非常簡單，用戶只需要配置<chart>標(biāo)簽的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>

雷達(dá)圖有很多種樣式，雷達(dá)圖點(diǎn)與點(diǎn)之間是通過直接連接的，如果希望以曲線連接則需要設(shè)置<radar>標(biāo)簽的 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>

那么如果你希望你的雷達(dá)圖中的連線像面積圖那樣顯示，那么可以像下面這樣在<series>標(biāo)簽增加一個(gè)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>

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

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

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

下面是一個(gè)簡單的堆疊圖，需要注意的是堆疊圖比如是存在多個(gè)series的，每個(gè)series你可以當(dāng)作一組分類，每個(gè)series下的point指標(biāo)數(shù)量都是相同的，并且他們的name一一對應(yīng)，最后你看到的效果就會(huì)是相同name的指標(biāo)堆疊在一起了。

柱狀堆疊圖與常規(guī)的柱狀圖唯一的區(qū)別就是在<y_axis>標(biāo)簽下有一個(gè)<scale mode="Stacked" />，這個(gè)標(biāo)簽決定了柱狀圖是以堆疊還是以常規(guī)顯示。

      <?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的情況下，堆疊圖和常規(guī)柱狀圖的效果：

?

?

結(jié)束總結(jié)

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

上面的XML例子是最最簡單的情況下的效果，大家會(huì)發(fā)現(xiàn)圖中沒有自定義的標(biāo)題、沒有冒泡提示、沒有圖例等，別擔(dān)心，后續(xù)我會(huì)慢慢與大家分享。

Anychart圖表系列三之常用圖介紹

更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號聯(lián)系： 360901061

您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對您有幫助就好】元

2元

5元

10元

20元

自定義

日韩久久久精品,亚洲精品久久久久久久久久久,亚洲欧美一区二区三区国产精品 ,一区二区福利