Sencha Touch：UI组件 – 图表

这是为了创建不同类型的图表。

1、基本绘制

这用于创建不同类型的简单图表，例如圆形和/或矩形。

语法

以下是添加表单的简单语法。

Ext.create("Ext.draw.Component", {})

例

以下是显示用法的简单示例。

<!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.draw.Component", {
                  fullscreen: true,
                  sprites: [
                     {
                        type: 'circle',
                        fillStyle: '#ff8',
                        strokeStyle: 'black',
                        lineWidth: 3,
                        radius: 100,
                        x: 100,
                        y: 100
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

2、饼图

描述

这是创建不同类型的饼图

语法

以下是添加饼图的简单语法。

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>

3、折线图

描述

这是为了创建不同类型的折线图。

语法

以下是添加折线图的简单语法。

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

例

以下是显示用法的简单示例。

<!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.CartesianChart", {
                  fullscreen: true, 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},
                        {"name": "Item-6", "g1": 28.51, "g2": 12.43, "g3": 28.67, "g4": 108.29, "g5": 47.84},
                        {"name": "Item-7", "g1": 34.43, "g2": 4.40, "g3": 9.89, "g4": 127.27, "g5": 36.90},
                        {"name": "Item-8", "g1": 21.65, "g2": 13.87, "g3": 5.44, "g4": 112.49, "g5": 16.29},
                        {"name": "Item-9", "g1": 12.98, "g2": 35.44, "g3": 16.37, "g4": 135.54, "g5": 16.78},
                        {"name": "Item-10", "g1": 22.96, "g2": 38.70, "g3": 18.15, "g4": 114.96, "g5": 8.51},
                        {"name": "Item-11", "g1": 0.49, "g2": 51.90, "g3": 19.98, "g4": 95.00, "g5": 9.69},
                        {"name": "Item-12", "g1": 20.87, "g2": 62.07, "g3": 25.96, "g4": 87.79, "g5": 3.18},
                        {"name": "Item-13", "g1": 25.10, "g2": 78.46, "g3": 26.04, "g4": 91.54, "g5": 12.41},
                        {"name": "Item-14", "g1": 16.87, "g2": 56.80, "g3": 1.39, "g4": 71.78, "g5": 16.54}
                     ]
                  }, background: 'white', interactions: ['panzoom'], legend: {
                     position: 'bottom'
                  },

                  //define x and y-axis.
                  axes: [
                     {
                        type: 'numeric',
                        position: 'left'
                     },
                     {
                        type: 'category',
                        visibleRange: [0, 1],
                        position: 'bottom'
                     }
                  ],
                  //define the actual series
                  series: [{
                     type: 'line',
                     xField: 'name',
                     yField: 'g1',
                     title: 'Normal',
                     style: {
                        fill: "#115fa6",
                        stroke: "#115fa6",
                        fillOpacity: 0.6,
                        miterLimit: 3,
                        lineCap: 'miter',
                        lineWidth: 2
                     }
                  }, {
                     type: 'line',
                     xField: 'name',
                     yField: 'g2',
                     title: 'Smooth',
                     style: {
                        smooth: true,
                        stroke: "#94ae0a",
                        fillOpacity: 0.6,
                        miterLimit: 3,
                        lineCap: 'miter',
                        lineWidth: 2
                     }
                  }, {
                     type: 'line',
                     xField: 'name',
                     yField: 'g3',
                     title: 'Step line',
                     style: {
                        step: true,
                        stroke: "#a61120",
                        fillOpacity: 0.6,
                        miterLimit: 3,
                        lineCap: 'miter',
                        lineWidth: 2
                     }
                  }]
               });
            }
         });

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

4、条形图

描述

这是创建不同类型的条形图。

语法

以下是添加条形图的简单语法。

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

例

以下是显示用法的简单示例。

现场演示
<!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.CartesianChart", {
                  fullscreen: true,
                  background: 'white',
                  flipXY: true, 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},
                        {"name": "Item-6", "g1": 28.51, "g2": 12.43, "g3": 28.67, "g4": 108.29, "g5": 47.84},
                        {"name": "Item-7", "g1": 34.43, "g2": 4.40, "g3": 9.89, "g4": 127.27, "g5": 36.90},
                        {"name": "Item-8", "g1": 21.65, "g2": 13.87, "g3": 5.44, "g4": 112.49, "g5": 16.29},
                        {"name": "Item-9", "g1": 12.98, "g2": 35.44, "g3": 16.37, "g4": 135.54, "g5": 16.78},
                        {"name": "Item-10", "g1": 22.96, "g2": 38.70, "g3": 18.15, "g4": 114.96, "g5": 8.51},
                        {"name": "Item-11", "g1": 0.49, "g2": 51.90, "g3": 19.98, "g4": 95.00, "g5": 9.69},
                        {"name": "Item-12", "g1": 20.87, "g2": 62.07, "g3": 25.96, "g4": 87.79, "g5": 3.18},
                        {"name": "Item-13", "g1": 25.10, "g2": 78.46, "g3": 26.04, "g4": 91.54, "g5": 12.41},
                        {"name": "Item-14", "g1": 16.87, "g2": 56.80, "g3": 1.39, "g4": 71.78, "g5": 16.54}
                     ]
                  }, interactions: ['panzoom'],
                  
                  //set legend configuration
                  legend: {
                     position: 'right',
                     width: 80
                  },

                  //define the x and y-axis configuration.
                  axes: [
                     {
                        type: 'numeric',
                        position: 'bottom',
                        grid: true,
                        minimum: 0
                     },
                     {
                        type: 'category',
                        position: 'left'
                     }
                  ],

                  //define the actual bar series.
                  series: [
                     {
                        type: 'bar',
                        xField: 'name',
                        yField: ['g1', 'g2', 'g3', 'g4', 'g5'],
                        axis: 'bottom',
                        highlight: true,
                        showInLegend: true, style: {
                           stroke: 'rgb(40,40,40)',
                           maxBarWidth: 30
                        },
                        // Cycles the red, green, and blue fill mode over the 2008, 2009,.., 2011, 2012 items
                        // subStyle parameters also override style parameters
                        subStyle: {
                           fill: ["#115fa6", 
                           "#94ae0a", "#a61120", 
                           "#ff8809", "#ffd13e", 
                           "#a61187", "#24ad9a", 
                           "#7c7474", "#a66111"]
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

5、面积图

描述

这是创建不同的面积图。

语法

这是添加面积图的简单语法。

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

例

以下是显示用法的简单示例。

现场演示
<!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.CartesianChart", {
                  fullscreen: true, 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},
                        {"name": "Item-6", "g1": 28.51, "g2": 12.43, "g3": 28.67, "g4": 108.29, "g5": 47.84},
                        {"name": "Item-7", "g1": 34.43, "g2": 4.40, "g3": 9.89, "g4": 127.27, "g5": 36.90},
                        {"name": "Item-8", "g1": 21.65, "g2": 13.87, "g3": 5.44, "g4": 112.49, "g5": 16.29},
                        {"name": "Item-9", "g1": 12.98, "g2": 35.44, "g3": 16.37, "g4": 135.54, "g5": 16.78},
                        {"name": "Item-10", "g1": 22.96, "g2": 38.70, "g3": 18.15, "g4": 114.96, "g5": 8.51},
                        {"name": "Item-11", "g1": 0.49, "g2": 51.90, "g3": 19.98, "g4": 95.00, "g5": 9.69},
                        {"name": "Item-12", "g1": 20.87, "g2": 62.07, "g3": 25.96, "g4": 87.79, "g5": 3.18},
                        {"name": "Item-13", "g1": 25.10, "g2": 78.46, "g3": 26.04, "g4": 91.54, "g5": 12.41},
                        {"name": "Item-14", "g1": 16.87, "g2": 56.80, "g3": 1.39, "g4": 71.78, "g5": 16.54}
                     ]
                  }, 
                  interactions: {
                     type: 'panzoom'
                  },

                  legend: {
                     position: 'right', width: 80
                  },
                  axes: [
                     {
                        type: 'numeric',
                        position: 'left',
                        grid: true
                     },
                     {
                        type: 'category',
                        position: 'bottom',
                        visibleRange: [0, 0.25]
                     }
                  ],

                  series: [
                     {
                        type: 'area',
                        xField: 'name',
                        yField: ['g1', 'g2', 'g3', 'g4', 'g5'],
                        title: ['G1', 'G2', 'G3', 'G4', 'G5'],
                        style: {
                           stroke: 'black',
                            fillOpacity: 0.8
                        },
                        
                        //cycles the red, green, and blue fill mode over the g1, g2,..., g5 items
                        //cycles the black and white strokes lines over the g1, g2,..., g5 items
                        //substyle parameters also override style parameters
                        subStyle: {
                           fill: ["#115fa6", "#94ae0a", "#a61120", 
                            "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"]
                        }

                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

作者：terry，如若转载，请注明出处：https://www.web176.com/senchatouch/1577.html

Sencha Touch：UI组件 – 图表

1、基本绘制

语法

例

2、饼图

描述

语法

例

3、折线图

描述

语法

例

4、条形图

描述

语法

例

5、面积图

描述

语法

例

相关推荐

发表回复