Ext.js组件:Chart 图表

最新推荐文章于 2025-07-03 14:19:30 发布
转载 最新推荐文章于 2025-07-03 14:19:30 发布 · 1.9k 阅读 · 2
文章标签：

#前端框架 #extjs #组件 #chart

本文深入介绍了ExtJS中四种主要图表类型：饼图、折线图、条形图和区域图的使用方法，包括语法示例和具体代码实现，帮助开发者快速上手。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

图表用于以图形格式表示数据。 以下是Ext JS提供的不同图表：

编号图表
1Pie Chart

由于名称表示此图表用于以饼图格式表示数据。

2Line Chart

此图表用于以线图格式表示数据。

3Bar Chart

此图表用于以条形图格式表示数据。

4Area Chart

此图表用于以面积图形式表示数据。

1.Ext.js 饼图

描述

此图表用于表示饼图格式的数据。它是一个极坐标图。

语法

这里是简单的语法。

 

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

 

例

下面是一个简单的例子显示用法。

 

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/packages/charts/classic/charts.js"></script>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/packages/charts/classic/classic/resources/charts-all.css" rel="stylesheet" />
   <script type="text/javascript">
      Ext.onReady(function() {
         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.
             }]
         });
      });
   </script>
</head>
<body>
</body>
</html>

 

2. Ext.js 折线图

描述

此图表用于以线图格式表示数据。 它是一个笛卡尔图表。

语法

这里是简单的语法。

 

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

 

例

下面是一个简单的例子显示用法。

 

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/packages/charts/classic/charts.js"></script>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/packages/charts/classic/classic/resources/charts-all.css" rel="stylesheet" />
   <script type="text/javascript">
      Ext.onReady(function() {
         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'
             }]
         });
      });
   </script>
</head>
<body>
</body>
</html>

这将产生以下结果

Ext.js 折线图

3. Ext.js 条形图

描述

此图表用于以条形图格式表示数据。 它是一个笛卡尔图表。

语法

这里是简单的语法。

 

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

 

例

下面是一个简单的例子显示用法。

 

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/packages/charts/classic/charts.js"></script>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/packages/charts/classic/classic/resources/charts-all.css" rel="stylesheet" />
   <script type="text/javascript">
      Ext.onReady(function() {
         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'
            }]
         });
      });
   </script>
</head>
<body>
</body>
</html>

这将产生以下结果

Ext.js 条形图

4. Ext.js 区域图

描述

此图表用于以区域图形格式表示数据。 它是一个笛卡尔图表。

语法

这里是简单的语法。

 

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

 

例

下面是一个简单的例子显示用法。

 

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/packages/charts/classic/charts.js"></script>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/packages/charts/classic/classic/resources/charts-all.css" rel="stylesheet" />
   <script type="text/javascript">
      Ext.onReady(function() {
         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']
             }]
         });
      });
   </script>
</head>
<body>
</body>
</html>

这将产生以下结果

Ext.js 区域图

Ext.js 4 部分基础内容学习记录
积累、分享。聚沙成塔
07-29 1618
ext.js 4
Ext.ux.GoogleChart extjs插件
04-02
总的来说，Ext.ux.GoogleChart插件是ExtJS开发者实现数据可视化的一个强大工具，它结合了Google Charts的灵活性和ExtJS的组件化优势，使得在JavaScript应用中创建高质量的数据图表变得更加容易。
Extjs4.0 Chart的使用
热门推荐
一切皆有联系
08-07 2万+
0、主题 1、坐标：上、下、左、右。 坐标的类型，数字、分类... 坐标包含需要显示的坐标值，即绑定的字段 坐标值的样式，比如旋转、字体大小、格式 坐标的最大值、最小值、是否显示网格 坐标旁边显示的文字 2、图表：柱状图、饼图、区域图... 图标的类型
Extjs4.2 Chart柱状图
02-24
Extjs4.2 Chart柱状图实例。
Ext JS 源码与学习资源大全
最新发布
weixin_42315569的博客
07-03 830
Ext JS是一个基于JavaScript的开源框架，广泛用于创建跨浏览器的富互联网应用程序。它以其高级组件和丰富的主题库而闻名。Ext JS提供了一套完整的工具集，可用来构建桌面式网络应用程序，其特点是响应式设计和丰富的用户交互元素，包括图表、数据网格和面板等。在Ext JS中，组件是可复用的UI单元，它们是由和类派生出来的。一个简单的Ext JS组件定义如下：html: '这是一个Ext JS组件',});这里创建了一个基本的组件，它仅仅显示文本内容。
ExtJS图表
张晨光老师的播客
03-24 1845
1.1 学习技能点 本次在线学习将学习以下知识技能：Ø 柱状图Ø 饼状图Ø 折线图1.2 学习任务ExtJS3使用的Flash Chart来源于YUI，其中包括柱状图、饼状图等多种图表，这些图表可以与ExtJS组件完美整合，不仅可以在Panel中显示图表，还可以通过Store为图表提供数据。1.2.1 任务1：使用柱状图统计每月的访问人数需求说明首先定义一个JsonStroe为我们要实现的图表提供
Extjs学习 图表Chart概述
jazywoo_在路上
08-17 1986
Extjs.chart提供了可视化展现数据的能力，每个图表可以绑定到数据模型Ext.data.Store上， 并随着数据的变换可以自动的更新图表 一个图表对象包括图标风格、坐标（axes）、序列（series） Extjs提供的坐标轴有5类、图表序列有8类： 坐标轴（axes） 数值轴 （Ext.chart.axis.Numeric） 时间轴 （Ext.chart.axis.Time）
Extjs5 使用Charts
猿来这样-谢厂节的博客
04-28 2668
1.app.json设置"requires": [ "charts" ],2.运行命令sencha watch3.示例/** * A basic line chart displays information as a series of data points connected through * straight lines. It is similar to scatter pl
ext js Chart属性中文解释
weixin_44143001的博客
01-20 296
axes:用来配置坐标，可以配置多个坐标。 type：配置坐标的类型。一般用到的是Numeric、Category position：配置坐标的位置，比如：上下左右 fields：可以配置多个字段，用来设置坐标显示的值。其实这个配置和series中的yFiled配置项是没有关系的 label：可以配置文字的显示方式。默认显示字段的值。比如设置label旋转一定的度数 label...
Ext.ux.GoogleChart插件：扩展ExtJS图表功能
Ext.ux.GoogleChart是基于ExtJS框架的一个插件，它允许开发者在ExtJS应用中方便地嵌入Google Chart API图表。这个插件的开发和使用涉及到几个重要的技术领域和知识点，包括JavaScript框架ExtJS、Google Chart API...
EXTJS图表功能详解及Ext.ux.GoogleChart组件应用
标题中提到的EXTJS，全称Ext JS，是一款用于构建前端Web应用的JavaScript框架，尤其是基于浏览器的富Internet应用。它提供了丰富的用户界面组件，包括表格、树形控件、表单字段、以及更复杂的组件如日历、图表等。...
Extjs4Charts图表
11-04
Ext js 4 Charts 图表 一个用Extjs4.0实现的Charts 图表 已经整理，能直接看效果的哦，用着不错，要使用的拿走吧
extjs 4chart
03-28
sencha官网中ext4中关于曲线图的内容！！！！！
extjs—chart柱形图 例子
12-16
支持富客户端extjs技术 绚丽的报表图形
Ext JS用户扩展控件：Google图表绘制指南
然后，可以通过创建Ext JS的组件，并在其中嵌入Google Chart的图表代码来绘制图表。 #### 5. 实现步骤详解 1. **引入Google Chart库**： 在HTML页面中，通过`<script>`标签引入Google Charts库。例如： ```html ...
Extjs Chart
子寒阁
11-14 559
I follow exactly as the MVC example. But I always get error in controller file. Any hint would be appreciated. Ext.Loader.setConfig({ enabled: true }); Ext.application({ name: 'FSSP', controllers:
ExtJs中的charts
w375179337的专栏
01-15 1367
var typeStore = new Ext.data.Store({    autoLoad : {params : {groupId : nId, groupParent : strGp,startTime : initTime(70), endTime: initTime(0), devId : mDevId, factId : mFactId}},    reader  : new Ex
Ext Js chart
iteye_19471的博客
04-26 145
对于一个ext菜鸟的学习者，首先想的是怎么入门。入门的基本模型要出来 创建chart表的步骤 Ext.define('aa',{ extend:'Ext.data.Model', fields:['temp','date'] }); var store = Ext.create('Ext.data.Store',{ model:'aa', data:...
ExtJs 画出图表
diversity的专栏
07-29 7995
ExtJs API地址http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/example今天心情不好，决定写博客，发泄发泄，进入主题好吧，刚接触Extjs不久，发现ExtJs前台表现真的非常强大，最近看着api的例子，自己做了一张图表，再次总结一下1.画图 Ext.define('POWERCONSUMPTIONGRAPHS.
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值