Sencha 觸屏 - 餅狀圖

描述

這是建立不同型別的餅狀圖

語法

以下是新增餅狀圖的簡單語法。

Ext.create("Ext.chart.PolarChart", {})
series : [type : 'pie']

例項

以下是一個演示用途的簡單例項。

現場演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js">
      </script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha', launch: function() {
               Ext.create('Ext.chart.PolarChart', {
                  background: 'white', store: {
                     fields: ['name', 'g1', 'g2', 'g3', 'g4', 'g5'],
                     data: [
                        {"name": "Item-0", "g1": 18.34, "g2": 0.04, "g3": 22.35, "g4": 10.50, "g5": 18.42},
                        {"name": "Item-1", "g1": 2.67, "g2": 14.87, "g3": 0.41, "g4": 19.15, "g5": 1.64},
                        {"name": "Item-2", "g1": 1.90, "g2": 5.72, "g3": 14.80, "g4": 38.93, "g5": 2.77},
                        {"name": "Item-3", "g1": 21.37, "g2": 2.13, "g3": 12.98, "g4": 63.82, "g5": 18.85},
                        {"name": "Item-4", "g1": 2.67, "g2": 8.53, "g3": 4.44, "g4": 87.39, "g5": 27.23},
                        {"name": "Item-5", "g1": 18.22, "g2": 4.62, "g3": 8.26, "g4": 97.63, "g5": 34.37}
                     ]
                  },
               
                  fullscreen: true, innerPadding: 35,
               
                  //bind the chart to a store with the following structure
                  interactions: ['rotate'],
                     colors: ["#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"],

                  //configure the legend.
                  legend: {
                     position: 'right',
                     width: 100
                  },

                  //describe the actual pie series.
                  series: [
                     {
                        type: 'pie', xField: 'g1', label: {
                           field: 'name', display: 'rotate'
                        },
                        donut: 25, style: {
                           miterLimit: 10, lineCap: 'miter', lineWidth: 2
                        }
                     }
                  ]
               });
            }
         });

      </script>
   </head>
   <body>
   </body>
</html>

這將產生以下結果 −

sencha_touch_view_components.htm

列印頁面

上一個

下一個