在ExtJS中,可以使用Ext.chart.series.Column系列来创建堆叠迷你图widgetColumn。widgetColumn是一种特殊的列类型,它允许在表格中显示图表。
堆叠迷你图widgetColumn的方法如下:
以下是一个示例代码:
Ext.require([
'Ext.chart.*',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*'
]);
Ext.onReady(function () {
// 创建数据模型
Ext.define('DataModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'data1', type: 'int'},
{name: 'data2', type: 'int'},
{name: 'data3', type: 'int'}
]
});
// 创建数据源
var store = Ext.create('Ext.data.Store', {
model: 'DataModel',
data: [
{name: 'Item 1', data1: 10, data2: 20, data3: 30},
{name: 'Item 2', data1: 15, data2: 25, data3: 35},
{name: 'Item 3', data1: 20, data2: 30, data3: 40},
{name: 'Item 4', data1: 25, data2: 35, data3: 45}
]
});
// 创建堆叠迷你图widgetColumn
var widgetColumn = {
xtype: 'widgetcolumn',
width: 100,
widget: {
xtype: 'chart',
animate: true,
store: store,
axes: [{
type: 'numeric',
position: 'left',
fields: ['data1', 'data2', 'data3'],
grid: true
}],
series: [{
type: 'column',
xField: 'name',
yField: ['data1', 'data2', 'data3'],
stacked: true
}]
}
};
// 创建表格
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
width: 400,
height: 300,
store: store,
columns: [
{text: 'Name', dataIndex: 'name', flex: 1},
widgetColumn
]
});
});
在上述代码中,我们创建了一个包含堆叠迷你图widgetColumn的表格。堆叠迷你图展示了每个数据项在不同类别下的堆叠情况。你可以根据实际需求修改数据模型、数据源和图表配置。
此外,腾讯云提供了一系列与云计算相关的产品,如云服务器、云数据库、云存储等。你可以根据具体需求选择适合的产品。详细的产品介绍和文档可以在腾讯云官网上找到。
领取专属 10元无门槛券
手把手带您无忧上云