ExtJS - UI组件 - Chart

更新记录
转载请注明出处:https://www.cnblogs.com/cqpanda/p/16587398.html
2022年8月16日 发布。
2022年8月13日 从笔记迁移到博客。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

Chart(图表)说明

图表的类型(Chart types)

说明

three types of charts: cartesian, polar, and spacefilling(笛卡尔、极坐标和空间填充)

cartesian chart

Ext.chart.CartesianChart (xtype: cartesian or chart)

A cartesian chart has two directions: X and Y. By default, X is horizontal and Y is vertical. Charts that use the cartesian coordinates are column, bar, area, line, and scatter

polar chart

Ext.chart.PolarChart (xtype: polar)

These charts have two axes: angular and radial. Charts that plot values using the
polar coordinates are pie and radar

spacefilling chart

Ext.chart.SpaceFillingChart (xtype: spacefilling)

These charts fill the complete area of the chart

图表的组成

Series定义图形的内容
Axes定义图表的轴
Legend定义图表的图例
Labels定义图表的标签
Interactions定义图表的交互
Sprite定义图表的标题等元素

定义Legend

legend: {
    docked: 'left' //可取值left, top, bottom, right
}

使用前准备

如果是直接引入的CSS和JS方式进行ExtJS开发
将build目录下的packages目录复制到开发目录下
需要额外引入图形组件的css和js文件

<link rel="stylesheet" href=/packages/charts/modern/modern-material/resources/charts-all-debug.css">
<script src="/packages/charts/modern/charts-debug.js">script>

常用图表

折线图(Line Chart)

语法：

Ext.create('Ext.chart.CartesianChart',{
   series: [{
      type: 'line',
      xField: 'name',
      yField: 'G1'
   }]
   //render, legend and other properties
});

条形图(Bar Chart)

Ext.create('Ext.chart.CartesianChart',{
   series: [{
      type: 'bar',
      xField: 'name',
      yField: 'G1'
   }]
   //render, legend and other properties
});

饼图(Pie Chart)

Ext.chart.PolarChart (xtype: polar)

语法：

Ext.create('Ext.chart.PolarChart', {
   series: [{
      Type: 'pie'
      ..
   }]
   //render and other properties.
});

面积图(Area Chart)

Ext.create('Ext.chart.CartesianChart',{
   series: [{
      type: 'area',
      xField: 'name',
      yField: 'G1'
   }]
   //render, legend and other properties
});

实例：柱状图

实例：绘制柱状图(bar chart)

//创建对应的模型
Ext.define('PandaApp.model.WebSiteVisitor', {
    extend: 'Ext.data.Model',
    fields: [
        {
            name: 'name',
            type: 'string'
        },
        {
            name: 'value',
            type: 'int'
        }
    ]
});
 
//创建对应的数据存储
Ext.define('PandaApp.store.WebSiteVisitors', {
    extend: 'Ext.data.Store',
    model: 'PandaApp.model.WebSiteVisitor',
    data: [
        { name: '1',  value: 50 },
        { name: '2',  value: 154 },
        { name: '3',  value: 166 },
        { name: '4',  value: 189 },
        { name: '5',  value: 199 },
        { name: '6',  value: 175 },
        { name: '7',  value: 165 },
        { name: '8',  value: 126 },
        { name: '9',  value: 112 },
        { name: '10', value: 109 },
        { name: '11', value: 87 },
    ]
});
 
//实例化
var store = Ext.create('PandaApp.store.WebSiteVisitors');
 
//创建图形
Ext.define('PandaApp.view.chart.BarChart', {
    extend: 'Ext.chart.Chart',
    xtype: 'chart-BarChart',
    config: {
        animate: true,
        store : store,
        axes : [
            {
                type : 'numeric',
                position: 'left',
                fields : ['value'],
                title : 'Value'
            },
            {
                type : 'category',
                position: 'bottom',
                fields : ['name'],
                title : 'Name'
            }
        ],
        series : [
            {
                type : 'bar',
                axis : 'bottom',
                xField: 'name',
                yField: 'value'
            }
        ]
    }
});
 
Ext.create('PandaApp.view.chart.BarChart',{
    renderTo: Ext.getBody(),
    width: 800,
    height: 600
});

实例：绘制柱状图2(bar chart)

//定义测试用的模型
Ext.define('PandaApp.model.Population', {
    extend: 'Ext.data.Model',
    fields: ['year', 'population']
});
 
//定义测试用的Store
Ext.define('PandaApp.store.Population', {
    extend: 'Ext.data.Store',
    storeId: 'population',
    model: 'PandaApp.model.Population',
    data: [   //内联数据
        { "year": "1610","population": 350 },
        { "year": "1650","population": 50368 },
        { "year": "1700", "population": 250888 },
        { "year": "1750","population": 1170760 },
        { "year": "1800","population": 5308483 },
        { "year": "1900","population": 76212168 },
        { "year": "1950","population": 151325798 },
        { "year": "2000","population": 281421906 },
        { "year": "2010","population": 308745538 },
    ]
});
 
//创建Store实例
var store = Ext.create("PandaApp.store.Population");
 
//创建容器存放图表组件
Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 500,
    layout: 'fit',
    items: [
        {
            xtype: 'chart',   //图表组件
            insetPadding: { top: 60, bottom: 20, left: 20, right: 40 },
            store: store,  //指定关联的Store
            axes: [    //创建轴
                {
                    type: 'numeric',    //数值类型的轴
                    position: 'left',   //位置：左侧
                    grid: true,         //开启网格
                    title: { text: 'Population in Millions', fontSize: 16 },
                    //指定轴描述
                },
                {
                    type: 'category',                       //分类类型的轴
                    title: { text: 'Year', fontSize: 16 },  //指定轴的描述
                    position: 'bottom',                     //指定轴的位置
                }
            ],
            series: [   //指定内容
                {
                    type: 'bar',   //指定类型为栏
                    xField: 'year',         //x轴对应的Store数据字段
                    yField: ['population']  //y轴对应的Store数据字段
                }
            ],
            sprites: {      
                type: 'text',
                text: 'United States Population',  //指定标题
                font: '25px Helvetica',
                width: 120,
                height: 35,
                x: 100,
                y: 40
            }
        }
    ]
});

实例：绘制柱状图3

代码：

//创建测试使用Store
var myChartStore = Ext.create('Ext.data.ArrayStore',{
    storeId:'salesStore',   //定义Store的Id
    fields:[   //定义字段
        {name: 'id', type: 'int'},
        {name: 'region', type: 'string'},
        {name: 'sales', type: 'float'} ,
        {name: 'salesb', type: 'float'}
    ],
    data: [  //定义内联数据
        [10001 ,"North", 1500.55 , 1450.66 ],
        [10002 ,"South", 2344.99 , 3200.45 ],
        [10003 ,"East", 1750.44 , 950.55 ],
        [10004 ,"West", 3000.00 , 3200.55 ],
        [10005 ,"Central", 4523.45 , 1963.44 ],
        [10006 ,"OverSeas", 2489.55, 2786.12 ]
    ]
});
 
//创建图表
var mychart= Ext.create('Ext.chart.CartesianChart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 600,
    store: myChartStore,  //关联的Store
    insetPadding: {       //配置内边距
        top: 50,
        left: 25,
        right: 25,
        bottom: 15
    },
    interactions: 'itemhighlight',  //配置交互
    axes: [     //配置轴信息
        {
            type: 'numeric',    //配置轴的类型
            position: 'left',   //配置轴的位置
            title: {            //配置轴的标题
                text: 'Sales 1st to 3th Quarter',  //配置轴标题的文本
                fontSize: 14,   //配置轴标题的字体
                fillStyle:'#0d7179' //配置轴标题的颜色
            },
            fields: 'sales'     //配置轴关联的字段
        },
        {
            type: 'category',   //配置轴的类型
            position: 'bottom', //配置轴的位置
            title: {
                text: 'Sales by Branch',
                fontSize: 18,
                fillStyle:'#277cc0'
                },
            fields: 'region'
        }
    ],
    series: {   //配置图表的内容
        type: 'bar',    //图表类型为柱状图
        title:['Main branch','Branch B'],   //标题
        xField: 'region',   //x轴对应的数据
        yField: 'sales',    //y轴对应的数据
        style:{             //配置风格
            strokeStyle: '#999999',
            fillStyle: '#cccc99'
        },
        highlight:{     //配置高亮
            strokeStyle: '#990000',
            fillStyle: '#ffcc66',
            lineDash: [5, 3]
        },
        label: {    //配置标签
            field:'sales',
            display:'insideEnd'
        }
    },
    sprites: {
        type: 'text',
        text: 'My Company - 2015',
        fontSize: 22,
        fillStyle: '#993366',
        width: 100,
        height: 30,
        x: 40, // the sprite x position
        y: 25 // the sprite y position
    }
});

实例：绘制柱状图(横向)

添加翻转配置项到chart中

flipXY: true,     //翻转XY轴

在轴配置上，翻转对应的轴的位置即可

//定义测试用的模型
Ext.define('PandaApp.model.Population', {
    extend: 'Ext.data.Model',
    fields: ['year', 'population']
});
 
//定义测试用的Store
Ext.define('PandaApp.store.Population', {
    extend: 'Ext.data.Store',
    storeId: 'population',
    model: 'PandaApp.model.Population',
    data: [   //内联数据
        { "year": "1610","population": 350 },
        { "year": "1650","population": 50368 },
        { "year": "1700", "population": 250888 },
        { "year": "1750","population": 1170760 },
        { "year": "1800","population": 5308483 },
        { "year": "1900","population": 76212168 },
        { "year": "1950","population": 151325798 },
        { "year": "2000","population": 281421906 },
        { "year": "2010","population": 308745538 },
    ]
});
 
//创建Store实例
var store = Ext.create("PandaApp.store.Population");
 
//创建容器存放图表组件
Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 500,
    layout: 'fit',
    items: [
        {
            xtype: 'chart',   //图表组件
            flipXY: true,     //翻转XY轴
            insetPadding: { top: 60, bottom: 20, left: 20, right: 40 },
            store: store,  //指定关联的Store
            axes: [    //创建轴
                {
                    type: 'numeric',    //数值类型的轴
                    position: 'bottom',   //位置：左侧
                    grid: true,         //开启网格
                    title: { text: 'Population in Millions', fontSize: 16 },
                    //指定轴描述
                },
                {
                    type: 'category',                       //分类类型的轴
                    title: { text: 'Year', fontSize: 16 },  //指定轴的描述
                    position: 'left',                     //指定轴的位置
                }
            ],
            series: [   //指定内容
                {
                    type: 'bar',   //指定类型为栏
                    xField: 'year',         //x轴对应的Store数据字段
                    yField: ['population']  //y轴对应的Store数据字段
                }
            ],
            sprites: {
                type: 'text',
                text: 'United States Population',  //指定标题
                font: '25px Helvetica',
                width: 120,
                height: 35,
                x: 100,
                y: 40
            }
        }
    ]
});

实例：绘制柱状图(多层堆叠)

代码：

//定义测试使用的模型
Ext.define('PandaApp.model.Population', {
    extend: 'Ext.data.Model',
    fields: ['year', 'total','slaves']
});
 
//定义测试使用的数据仓库
Ext.define('PandaApp.store.Population', {
    extend: 'Ext.data.Store',
    storeId: 'population',
    model: 'PandaApp.model.Population',
    data: [
        { "year": "1790", "total": 3.9, "slaves": 0.7 },
        { "year": "1800", "total": 5.3, "slaves": 0.9 },
        { "year": "1810", "total": 7.2, "slaves": 1.2 },
        { "year": "1820", "total": 9.6, "slaves": 1.5 },
        { "year": "1830", "total": 12.9, "slaves": 2 },
        { "year": "1840", "total": 17, "slaves": 2.5 },
        { "year": "1850", "total": 23.2, "slaves": 3.2 },
        { "year": "1860", "total": 31.4, "slaves": 4 },
    ]
});
 
//创建数据仓库实例
var store = Ext.create("PandaApp.store.Population");
 
//创建容器存放图表组件
Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 500,
    layout: 'fit',
    items: [
        {
            xtype: 'cartesian',   //设置图表组件的类型
            store: store,         //设置关联的Store
            insetPadding: { top: 60, bottom: 20, left: 20, right: 40 },
            axes: [  //配置轴
                {
                    type: 'numeric',  //数值轴
                    position: 'left', //配置轴位置左侧
                    grid: true,       //开启网格
                    title: { text: 'Population in Millions', fontSize: 16 },
                    //轴描述
                },
                {
                    type: 'category',  //分类类型轴
                    title: { text: 'Year', fontSize: 16 }, //轴描述
                    position: 'bottom',  //配置轴位置底部
                }
            ],
            series: [  //配置图表内容
                {
                    type: 'bar',  //
                    xField: 'year', //X轴对应的Store字段
                    yField: ['total','slaves']  //y轴对应的Store字段
                }
            ],
            sprites: {  //图表的标题
                type: 'text',
                text: 'United States Slaves Distribution 1790 to 1860',
                font: '20px Helvetica',
                width: 120,
                height: 35,
                x: 60,
                y: 40
            }
        }
    ]
});

实例：绘制柱状图(多层并排)

代码：

//定义测试使用的模型
Ext.define('PandaApp.model.Population', {
    extend: 'Ext.data.Model',
    fields: ['year', 'total','slaves']
});
 
//定义测试使用的数据仓库
Ext.define('PandaApp.store.Population', {
    extend: 'Ext.data.Store',
    storeId: 'population',
    model: 'PandaApp.model.Population',
    data: [
        { "year": "1790", "total": 3.9, "slaves": 0.7 },
        { "year": "1800", "total": 5.3, "slaves": 0.9 },
        { "year": "1810", "total": 7.2, "slaves": 1.2 },
        { "year": "1820", "total": 9.6, "slaves": 1.5 },
        { "year": "1830", "total": 12.9, "slaves": 2 },
        { "year": "1840", "total": 17, "slaves": 2.5 },
        { "year": "1850", "total": 23.2, "slaves": 3.2 },
        { "year": "1860", "total": 31.4, "slaves": 4 },
    ]
});
 
//创建数据仓库实例
var store = Ext.create("PandaApp.store.Population");
 
//创建容器存放图表组件
Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 500,
    layout: 'fit',
    items: [
        {
            xtype: 'chart',
            legend: { docked: 'bottom' },
            insetPadding: { top: 60, bottom: 20, left: 20, right: 40 },
            store: store,
            axes: [
                {
                    type: 'numeric',
                    position: 'left',
                    grid: true,
                    title: { text: 'Population in Millions', fontSize: 16 },
                    minimum: 0,
                },
                {
                    type: 'category',
                    title: { text: 'Year', fontSize: 16 },
                    position: 'bottom',
                }
            ],
            series: [
                {
                    type: 'bar',
                    xField: 'year',
                    stacked: false,
                    title: ['Total', 'Slaves'],
                    yField: ['total', 'slaves'],
                    tooltip: {
                        trackMouse: true,
                        style: 'background: #fff',
                        renderer: function (storeItem, item) {
                        this.setHtml('In ' + storeItem.get('year') + ' ' + item.field + ' population was ' + storeItem.get(item.field) + ' m');
                        }
                    }
                }
            ],
            sprites: [
                {
                    type: 'text',
                    text: 'United States Slaves Distribution 1790 to 1860',
                    font: '20px Helvetica',
                    width: 120,
                    height: 35,
                    x: 60,
                    y: 40
                },
                {
                    type: 'text',
                    text: 'Source: http://www.wikipedia.org',
                    fontSize: 10,
                    x: 12,
                    y: 440
                }
            ]
        }
    ]
});

实例：绘制柱状图(3d)

代码：

//定义测试使用的模型
Ext.define('PandaApp.model.Population', {
    extend: 'Ext.data.Model',
    fields: ['year', 'total','slaves']
});
 
//定义测试使用的数据仓库
Ext.define('PandaApp.store.Population', {
    extend: 'Ext.data.Store',
    storeId: 'population',
    model: 'PandaApp.model.Population',
    data: [
        { "year": "1790", "total": 3.9, "slaves": 0.7 },
        { "year": "1800", "total": 5.3, "slaves": 0.9 },
        { "year": "1810", "total": 7.2, "slaves": 1.2 },
        { "year": "1820", "total": 9.6, "slaves": 1.5 },
        { "year": "1830", "total": 12.9, "slaves": 2 },
        { "year": "1840", "total": 17, "slaves": 2.5 },
        { "year": "1850", "total": 23.2, "slaves": 3.2 },
        { "year": "1860", "total": 31.4, "slaves": 4 },
    ]
});
 
//创建数据仓库实例
var store = Ext.create("PandaApp.store.Population");
 
//创建容器存放图表组件
Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 500,
    layout: 'fit',
    items: [
        {
            xtype: 'chart',
            legend: { docked: 'bottom' },
            insetPadding: { top: 60, bottom: 20, left: 20, right: 40 },
            store: store,
            axes: [
                {
                    type: 'numeric',
                    position: 'left',
                    grid: true,
                    title: { text: 'Population in Millions', fontSize: 16 },
                    minimum: 0,
                },
                {
                    type: 'category3d',   //切换为3d分类类型
                    title: { text: 'Year', fontSize: 16 },
                    position: 'bottom',
                }
            ],
            series: [
                {
                    type: 'bar3d',   //切换为3d图形
                    xField: 'year',
                    stacked: false,
                    title: ['Total', 'Slaves'],
                    yField: ['total', 'slaves'],
                    tooltip: {
                        trackMouse: true,
                        style: 'background: #fff',
                        renderer: function (storeItem, item) {
                        this.setHtml('In ' + storeItem.get('year') + ' ' + item.field + ' population was ' + storeItem.get(item.field) + ' m');
                        }
                    }
                }
            ],
            sprites: [
                {
                    type: 'text',
                    text: 'United States Slaves Distribution 1790 to 1860',
                    font: '20px Helvetica',
                    width: 120,
                    height: 35,
                    x: 60,
                    y: 40
                },
                {
                    type: 'text',
                    text: 'Source: http://www.wikipedia.org',
                    fontSize: 10,
                    x: 12,
                    y: 440
                }
            ]
        }
    ]
});

实例：面积图

实例：绘制面积图

代码：

//定义测试使用的模型
Ext.define('PandaApp.model.Population', {
    extend: 'Ext.data.Model',
    fields: ['year', 'total','slaves']
});
 
//定义测试使用的数据仓库
Ext.define('PandaApp.store.Population', {
    extend: 'Ext.data.Store',
    storeId: 'population',
    model: 'PandaApp.model.Population',
    data: [
        { "year": "1790", "total": 3.9, "slaves": 0.7 },
        { "year": "1800", "total": 5.3, "slaves": 0.9 },
        { "year": "1810", "total": 7.2, "slaves": 1.2 },
        { "year": "1820", "total": 9.6, "slaves": 1.5 },
        { "year": "1830", "total": 12.9, "slaves": 2 },
        { "year": "1840", "total": 17, "slaves": 2.5 },
        { "year": "1850", "total": 23.2, "slaves": 3.2 },
        { "year": "1860", "total": 31.4, "slaves": 4 },
    ]
});
 
//创建数据仓库实例
var store = Ext.create("PandaApp.store.Population");
 
//创建容器存放图表组件
Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 500,
    layout: 'fit',
    items: [
        {
            xtype: 'chart',
            legend: { docked: 'bottom' },
            insetPadding: { top: 60, bottom: 20, left: 20, right: 40 },
            store: store,
            axes: [
                {
                    type: 'numeric',
                    position: 'left',
                    grid: true,
                    title: { text: 'Population in Millions', fontSize: 16 },
                    minimum: 0,
                },
                {
                    type: 'category',
                    title: { text: 'Year', fontSize: 16 },
                    position: 'bottom',
                }
            ],
            series: [
                {
                    type: 'area',   //面积图
                    xField: 'year',
                    stacked: false,
                    title: ['Total','slaves'],
                    yField: ['total', 'slaves'],
                    style: {
                        stroke: "#94ae0a",
                        fillOpacity: 0.6,
                    },
                    tooltip: {
                        trackMouse: true,
                        style: 'background: #fff',
                        renderer: function (storeItem, item) {
                        this.setHtml('In ' + storeItem.get('year') + ' ' + item.field + ' population was ' + storeItem.get(item.field) + ' m');
                        }
                    }
                }
            ],
            sprites: [
                {
                    type: 'text',
                    text: 'United States Slaves Distribution 1790 to 1860',
                    font: '20px Helvetica',
                    width: 120,
                    height: 35,
                    x: 60,
                    y: 40
                },
                {
                    type: 'text',
                    text: 'Source: http://www.wikipedia.org',
                    fontSize: 10,
                    x: 12,
                    y: 440
                }
            ]
        }
    ]
});

实例：绘制折线图

实例：绘制折线图(单条)

代码：

//创建对应的模型
Ext.define('PandaApp.model.WebSiteVisitor', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'Time', type: 'int' },
        { name: 'Visitors', type: 'int' }
    ]
});
 
//创建对应的数据存储
Ext.define('PandaApp.store.WebSiteVisitors', {
    extend: 'Ext.data.Store',
    model: 'PandaApp.model.WebSiteVisitor',
    data: [   //直接内联数据
        { Time: '1', Visitors: 50 },
        { Time: '2', Visitors: 154 },
        { Time: '3', Visitors: 166 },
        { Time: '4', Visitors: 189 },
        { Time: '5', Visitors: 199 },
        { Time: '6', Visitors: 175 },
        { Time: '7', Visitors: 165 },
        { Time: '8', Visitors: 126 },
        { Time: '9', Visitors: 112 },
        { Time: '10', Visitors: 109 },
        { Time: '11', Visitors: 87 },
    ]
});
 
//创建数据存储实例
var store = Ext.create('PandaApp.store.WebSiteVisitors');
 
//创建图形
Ext.define('PandaApp.view.chart.SiteVisits', {
    extend: 'Ext.chart.CartesianChart',
    xtype: 'chart-SiteVisits',
    config: {
        animate: true,      //开启动画效果
        store : store,      //定义关联Store
        series : [          //定义图形类型
            {
                type : 'line',  //折线图
                smooth: true,  //是否平滑
                axis : 'left',  //轴的位置
                xField: 'Time', //x轴的标题
                yField: 'Visitors' //y轴的标题
            }
        ],
        axes : [   //定义轴
            {
                type : 'numeric',       //数值类型的轴
                grid : true,            //开启网格
                position : 'left',      //位置
                fields : ['Visitors'],  //内容
                title : 'Visitors',     //标题
                minimum : 0,            //最小值
                maximum : 200,          //最大值
                majorTickSteps: 5
            },
            {
                type : 'numeric',
                position : 'bottom',
                fields : 'Time',
                title : 'Time',
                minimum : 0,
                maximum : 20,
                decimals : 0,
                constrain : true,
                majorTickSteps: 20
            }
        ]
    }
});
 
//实例化图形
Ext.create('PandaApp.view.chart.SiteVisits',{
    renderTo: Ext.getBody(),
    width: 800,
    height: 600
});

实例：绘制折线图(多条)

代码：

//定义测试使用的模型
Ext.define('PandaApp.model.Population', {
    extend: 'Ext.data.Model',
    fields: ['year', 'total','slaves']
});
 
//定义测试使用的数据仓库
Ext.define('PandaApp.store.Population', {
    extend: 'Ext.data.Store',
    storeId: 'population',
    model: 'PandaApp.model.Population',
    data: [
        { "year": "1790", "total": 3.9, "slaves": 0.7 },
        { "year": "1800", "total": 5.3, "slaves": 0.9 },
        { "year": "1810", "total": 7.2, "slaves": 1.2 },
        { "year": "1820", "total": 9.6, "slaves": 1.5 },
        { "year": "1830", "total": 12.9, "slaves": 2 },
        { "year": "1840", "total": 17, "slaves": 2.5 },
        { "year": "1850", "total": 23.2, "slaves": 3.2 },
        { "year": "1860", "total": 31.4, "slaves": 4 },
    ]
});
 
//创建数据仓库实例
var store = Ext.create("PandaApp.store.Population");
 
//创建容器存放图表组件
Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 500,
    layout: 'fit',
    items: [
        {
            xtype: 'chart',
            legend: { docked: 'bottom' },
            insetPadding: { top: 60, bottom: 20, left: 20, right: 40 },
            store: store,
            axes: [
                {
                    type: 'numeric',
                    position: 'left',
                    grid: true,
                    title: { text: 'Population in Millions', fontSize: 16 },
                    minimum: 0,
                },
                {
                    type: 'category',   //
                    title: { text: 'Year', fontSize: 16 },
                    position: 'bottom',
                }
            ],
            series: [
                    {
                     type: 'line',
                     xField: 'year',
                     title: ['Total'],
                     yField: ['total']
                    },
                    {
                     type: 'line',
                     xField: 'year',
                     title: ['Slaves'],
                     yField: ['slaves'],
                    },
            ],
            sprites: [
                {
                    type: 'text',
                    text: 'United States Slaves Distribution 1790 to 1860',
                    font: '20px Helvetica',
                    width: 120,
                    height: 35,
                    x: 60,
                    y: 40
                },
                {
                    type: 'text',
                    text: 'Source: http://www.wikipedia.org',
                    fontSize: 10,
                    x: 12,
                    y: 440
                }
            ]
        }
    ]
});

实例：绘制饼图

实例：绘制饼图

代码：

//创建对应的数据存储
Ext.define('PandaApp.store.Expense', {
    extend: 'Ext.data.Store',
    alias: 'store.expense',
    fields: [ 'cat', 'spent'],
    data: [
        { "cat": "Restaurant", "spent": 100},
        { "cat": "Travel", "spent": 150},
        { "cat": "Insurance", "spent": 500},
        { "cat": "Rent", "spent": 1000},
        { "cat": "Groceries", "spent": 400},
        { "cat": "Utilities", "spent": 300},
    ]
});
 
//实例化
var store = Ext.create("PandaApp.store.Expense");
 
//创建容器
Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    width: 600,
    height: 500,
    layout: 'fit',
    items: [
        {
            xtype: 'polar',
            legend: { docked: 'bottom' },
            insetPadding: { top: 100, bottom: 20, left: 20, right: 40 },
            store: store,
            series: [
                {
                    type: 'pie',
                    angleField: 'spent',
                    label: {
                    field: 'cat',
                    },
                    tooltip: {
                        trackMouse: true,
                        renderer: function (storeItem, item) {
                            var value = ((parseFloat(storeItem.get('spent') /
                            toreItem.store.sum('spent')) * 100.0).toFixed(2));
                            this.setHtml(storeItem.get('cat') + ': ' + value + '%');
                        }
                    }
                }
            ]
        }
    ]
});

实例：绘制饼图2

代码：

//创建测试使用的数据Store
var myChartStore = Ext.create('Ext.data.ArrayStore',{
    storeId: 'salesStore',
    fields:[
        {name: 'id', type: 'int'},
        {name: 'region', type: 'string'},
        {name: 'sales', type: 'float'}
    ],
    data:[
        [10001 ,"North", 15.55],
        [10002 ,"South", 23.99],
        [10003 ,"East", 17.44],
        [10004 ,"West", 30.00],
        [10005 ,"Central", 4.1],
        [10006 ,"OverSeas", 2.55]
    ]
});
 
//创建图表
var mychart= Ext.create('Ext.chart.PolarChart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 500,
    store: myChartStore, //配置关联的Store
    insetPadding: {     //设置padding
        top: 50,
        left: 25,
        right: 25,
        bottom: 15
    },
    innerPadding: 20,
    interactions: ['rotate', 'itemhighlight'],
    theme: 'default-gradients',
    legend: {docked: 'bottom'},
    series: {
        type: 'pie',
        angleField:'sales', // xField
        label: {
            field:'region',
            calloutLine: {
                length: 60,
                width: 3
            }
        },
        highlight: true,
        tooltip: {
            trackMouse: true,
            renderer: function(item, storeItem) {
                item.setHtml(storeItem.get('region') + ': ' + storeItem.get('sales'));
            }
        }
    },
    sprites: {
        type: 'text',
        text: 'My Company - 2015',
        fontSize: 22,
        fillStyle: '#993366',
        width: 100,
        height: 30,
        x: 40, // the sprite x position
        y: 25 // the sprite y position
    }
});

实例：绘制饼图(3D)

代码：

//创建对应的数据存储
Ext.define('PandaApp.store.Expense', {
    extend: 'Ext.data.Store',
    alias: 'store.expense',
    fields: [ 'cat', 'spent'],
    data: [
        { "cat": "Restaurant", "spent": 100},
        { "cat": "Travel", "spent": 150},
        { "cat": "Insurance", "spent": 500},
        { "cat": "Rent", "spent": 1000},
        { "cat": "Groceries", "spent": 400},
        { "cat": "Utilities", "spent": 300},
    ]
});
 
//实例化
var store = Ext.create("PandaApp.store.Expense");
 
//创建容器
Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    width: 600,
    height: 500,
    layout: 'fit',
    items: [
        {
            xtype: 'polar',
            legend: { docked: 'bottom' },
            insetPadding: { top: 100, bottom: 20, left: 20, right: 40 },
            store: store,
            series: [
                {
                    type: 'pie3d',
                    thickness: 70,
                    distortion: 0.5,
                    angleField: 'spent',
                    label: {
                        field: 'cat',
                    },
                    tooltip: {
                        trackMouse: true,
                        renderer: function (storeItem, item) {
                            var value = ((parseFloat(storeItem.get('spent') /
                            toreItem.store.sum('spent')) * 100.0).toFixed(2));
                            this.setHtml(storeItem.get('cat') + ': ' + value + '%');
                        }
                    }
                }
            ]
        }
    ]
});

实例：绘制圈图(donut chart)

实例：绘制圈图

代码：

//创建对应的数据存储
Ext.define('PandaApp.store.Expense', {
    extend: 'Ext.data.Store',
    alias: 'store.expense',
    fields: [ 'cat', 'spent'],
    data: [
        { "cat": "Restaurant", "spent": 100},
        { "cat": "Travel", "spent": 150},
        { "cat": "Insurance", "spent": 500},
        { "cat": "Rent", "spent": 1000},
        { "cat": "Groceries", "spent": 400},
        { "cat": "Utilities", "spent": 300},
    ]
});
 
//实例化
var store = Ext.create("PandaApp.store.Expense");
 
//创建容器
Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    width: 600,
    height: 500,
    layout: 'fit',
    items: [
        {
            xtype: 'polar',
            legend: { docked: 'bottom' },
            insetPadding: { top: 100, bottom: 20, left: 20, right: 40 },
            store: store,
            series: [
                {
                    type: 'pie',
                    donut: 50,   //在饼图的基础上，加上这个属性
                    angleField: 'spent',
                    label: {
                        field: 'cat',
                    },
                    tooltip: {
                        trackMouse: true,
                        renderer: function (storeItem, item) {
                            var value = ((parseFloat(storeItem.get('spent') /
                            toreItem.store.sum('spent')) * 100.0).toFixed(2));
                            this.setHtml(storeItem.get('cat') + ': ' + value + '%');
                        }
                    }
                }
            ]
        }
    ]
});

实例：绘制圈图(3D)

代码：

//创建对应的数据存储
Ext.define('PandaApp.store.Expense', {
    extend: 'Ext.data.Store',
    alias: 'store.expense',
    fields: [ 'cat', 'spent'],
    data: [
        { "cat": "Restaurant", "spent": 100},
        { "cat": "Travel", "spent": 150},
        { "cat": "Insurance", "spent": 500},
        { "cat": "Rent", "spent": 1000},
        { "cat": "Groceries", "spent": 400},
        { "cat": "Utilities", "spent": 300},
    ]
});
 
//实例化
var store = Ext.create("PandaApp.store.Expense");
 
//创建容器
Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    width: 600,
    height: 500,
    layout: 'fit',
    items: [
        {
            xtype: 'polar',
            legend: { docked: 'bottom' },
            insetPadding: { top: 100, bottom: 20, left: 20, right: 40 },
            store: store,
            series: [
                {
                    type: 'pie3d',
                    donut: 50,
                    thickness: 70,
                    distortion: 0.5,
                    angleField: 'spent',
                    label: {
                        field: 'cat',
                    },
                    tooltip: {
                        trackMouse: true,
                        renderer: function (storeItem, item) {
                            var value = ((parseFloat(storeItem.get('spent') /
                            toreItem.store.sum('spent')) * 100.0).toFixed(2));
                            this.setHtml(storeItem.get('cat') + ': ' + value + '%');
                        }
                    }
                }
            ]
        }
    ]
});

待合并

实例：绘制堆积图(stacked chart)

饼图(Pie Chart)(实例存在问题，需要修复)

Ext.create('Ext.chart.PolarChart', {
   renderTo: document.body,
   width: 600,
   height: 300,
   
   store: {
      fields: ['name', 'g1'],
      data: [
         {"name": "Item-0", "g1": 57},
         {"name": "Item-1", "g1": 45},
         {"name": "Item-2", "g1": 67}
      ]
   },
   
   //configure the legend.
   legend: {
      docked: 'bottom'
   },
 
   //describe the actual pie series.
   series: [{
      type: 'pie',
      xField: 'g1',
      label: {
         field: 'name'
      },
      donut: 30  //increase or decrease for increasing or decreasing donut area in middle.
   }]
});

折线图(Line Chart)(实例存在问题，需要修复)

Ext.create('Ext.chart.CartesianChart', {
   renderTo: document.body,
   width: 600,
   height: 200,
   
   store: {
      fields: ['name', 'g1', 'g2'],
      data: [
         {"name": "Item-0", "g1": 57, "g2": 59},
         {"name": "Item-1", "g1": 45, "g2": 50},
         {"name": "Item-2", "g1": 67, "g2": 43},
         {"name": "Item-3", "g1": 45, "g2": 18},
         {"name": "Item-4", "g1": 30, "g2": 90}
      ]
   },
   legend: {
      docked: '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'
   }, {
      type: 'line',
      xField: 'name',
      yField: 'g2',
      title: 'Smooth'
   }]
});

条形图(Bar Chart)(实例存在问题，需要修复)

Ext.create('Ext.chart.CartesianChart', {
    renderTo: document.body,
    width: 600,
    height: 200,
    flipXY: true,
    
    store: {
        fields: ['name', 'g1', 'g2'],
        data: [
            {"name": "Item-0", "g1": 57, "g2": 59},
            {"name": "Item-1", "g1": 45, "g2": 50},
            {"name": "Item-2", "g1": 67, "g2": 43},
            {"name": "Item-3", "g1": 45, "g2": 18},
            {"name": "Item-4", "g1": 30, "g2": 90}
        ]
    },  
 
    //set legend configuration
    legend: {
        docked: 'right'
    },
 
    //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'],
        axis: 'left'
    }]
});

面积图(Area Chart)(实例存在问题，需要修复)

Ext.create('Ext.chart.CartesianChart', {
    renderTo: document.body,
    width: 600,
    height: 200,
    
    store: {
        fields: ['name', 'g1', 'g2'],
        data: [
            {"name": "Item-0", "g1": 57, "g2": 59},
            {"name": "Item-1", "g1": 45, "g2": 50},
            {"name": "Item-2", "g1": 67, "g2": 43},
            {"name": "Item-3", "g1": 45, "g2": 18},
            {"name": "Item-4", "g1": 30, "g2": 90}
        ]
    },
    legend: {
        docked: 'right'
    },
    axes: [{
        type: 'numeric',
        position: 'left',
        grid: true
    }, {
        type: 'category',
        position: 'bottom',
        visibleRange: [0,5]
    }],
    series: [{
        type: 'area',
        xField: 'name',
        yField: ['g1', 'g2'],
        title: ['G1', 'G2']
    }]
});