首页 > 其他分享> 文章详细

ExtJS - UI组件 - Chart

2022-08-16 07:30:09 阅读：229 来源： 互联网

标签：name Chart Ext UI slaves year type ExtJS store

更新记录
转载请注明出处: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文件

<!-- 引入CSS文件 -->
<link rel="stylesheet" href=/packages/charts/modern/modern-material/resources/charts-all-debug.css">
<!-- 引入JS文件 -->
<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']
    }]
});

标签：name,Chart,Ext,UI,slaves,year,type,ExtJS,store
来源： https://www.cnblogs.com/cqpanda/p/16587398.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ExtJS - UI组件 - Chart

Chart（图表）说明

图表的类型（Chart types）

说明

cartesian chart

polar chart

spacefilling chart

图表的组成

定义Legend

使用前准备

常用图表

折线图（Line Chart）

条形图（Bar Chart）

饼图（Pie Chart）

面积图（Area Chart）

实例：柱状图

实例：绘制柱状图（bar chart）

实例：绘制柱状图2（bar chart）

实例：绘制柱状图3

实例：绘制柱状图（横向）

实例：绘制柱状图（多层堆叠）

实例：绘制柱状图（多层并排）

实例：绘制柱状图（3d）

实例：面积图

实例：绘制面积图

实例：绘制折线图

实例：绘制折线图（单条）

实例：绘制折线图（多条）

实例：绘制饼图

实例：绘制饼图

实例：绘制饼图2

实例：绘制饼图（3D）

实例：绘制圈图（donut chart）

实例：绘制圈图

实例：绘制圈图（3D）

待合并

实例：绘制堆积图（stacked chart）

饼图（Pie Chart）（实例存在问题，需要修复）

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

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

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