拿平板发表博客 好费劲，代码 是从hg 里拷过来的，晚上不爱开电脑，明天单位整理下格式
extjs 雷达图表 页面第一次 加载 从后台返回数据 x 轴 渲染 不出来，
由于 项目原因 雷达数据要在页面初始化的时候 加载 虽然数据 返回到前台 但是x 轴的 汉字 是没有显示出来，这样就导致 图表 无法正常显示，找原因 找了好久 最后才知道 extjs 是在数据 返回之前 就渲染了图表，解决方法就是 给图表 先赋上初始值，附上代码如下:
1.在雷达图渲染之前，就初始化雷达图数据
//创建雷达图表数据集
var radarChartStore = Ext.create('Ext.data.ArrayStore', {
idIndex: 0,
fields: ['xdata', 'ydata']
});
//初始化雷达图表数据集方法
function radarChartStoreInit(){
radarChartStore.add({
xdata:"食杂店",
ydata:""
},{
xdata:"便利店",
ydata:""
},{
xdata:"超市",
ydata:""
},{
xdata:"商场",
ydata:""
},{
xdata:"烟酒商店",
ydata:""
},{
xdata:"娱乐服务类",
ydata:""
},{
xdata:"其它",
ydata:""
}
);
}
//执行雷达图表数据集初始化方法
radarChartStoreInit();
2.雷达图的定义
//#############################################################
//#1.单月柱形图和雷达图Model
//#2.单月社会存销比，柱形图store
//#3.单月社会存销比，柱形图chart
//#4.单月社会存销比，雷达图store
//#5.单月社会存销比，雷达图chart
//#6.单月社会存销比，报表chartPanel
//#############################################################
//===========================单月柱形图和雷达图Model============================
Ext.define('columnAndRadarModel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'xdata'
}, //x轴显示
{
name: 'ydata'
} //y轴显示
]
});
//=============================end======================================
//===================================单月社会存销比，柱形图store==============================
var singleSaveAndSaleColumnStore = Ext.create('Ext.data.ArrayStore', {
model: 'columnAndRadarModel',
autoLoad: false,
// 设置服务器端映射。
proxy: {
type: 'ajax',
url: 'chart/stock/getChartSocietyStocksAllType',
// 定义数据结构
reader: {
type: 'json',
root: 'root'
}
}
});
//=======================================end======================================
//==================================单月社会存销比，柱形图chart===============================
var singleSaveAndSaleColumnChart = Ext.create('Ext.chart.Chart', {
width: document.body.clientWidth * 0.5 * 0.3 ,
height:document.body.clientHeight * 0.5,
xtype: 'chart',
style: 'background:#fff',
animate: true,
theme:'Category1',
store: singleSaveAndSaleColumnStore,
axes: [{
type: 'Numeric',
position: 'left',
minimum: 0,
grid: true,
label: {
renderer:function(v){
return Ext.util.Format.round(v,1);
},
font: '10px Arial'
}
}, {
type: 'Category',
position: 'bottom',
fields: ['xdata'],
label: {
renderer: function(v){
return markerMap.get(v);
},
font: '12px Arial'
}
}],
series: [
{
type: 'column',
width: 70,
height: 25,
axis: 'left',
xField: 'xdata',
yField: 'ydata',
style:{
'width':40
},
tips: {
trackMouse: true,
width: 60,
height: 24,
renderer: function(storeItem, item){
this.setTitle((0==storeItem.get('ydata')?"0":storeItem.get('ydata')));
}
}
}
]
});
//=======================================end=====================================
//==================================单月社会存销比，雷达图store===============================
var singleSaveAndSaleRadarStore = Ext.create('Ext.data.ArrayStore', {
model: 'columnAndRadarModel',
autoLoad: false,
// 设置服务器端映射。
proxy: {
type: 'ajax',
url: 'chart/stock/getChartSocietyStocksAllType',
// 定义数据结构
reader: {
type: 'json',
root: 'root'
}
}
});
//=======================================end=====================================
//==================================单月社会存销比，雷达图chart==============================
var singleSaveAndSaleRadarChart = Ext.create('Ext.chart.Chart', {
width: document.body.clientWidth * 0.5 * 0.7 ,
height:document.body.clientHeight * 0.5,
style: 'background:#fff',
insetPadding: 20,
animate: true,
theme:'Category1',
store: radarChartStore,
axes: [{
type: 'Radial',
position:'1,14',
label: {
renderer: function(v){
return businessMap.get(v);
},
font: '12px Arial'
},
minimum: 0
}],
series: [{
type: 'radar',
xField: 'xdata',
yField: 'ydata',
showInLegend: true,
showMarkers: true,
markerConfig: {
radius: 2,
size: 2
},
style: {
opacity: 0.3
},
tips: {
trackMouse: true,
width: 60,
height: 24,
renderer: function(storeItem, item){
this.setTitle((0==storeItem.get('ydata')?"0":storeItem.get('ydata')));
}
}
}]
});
//=======================================end============================================
//=====================================单月社会存销比，雷达图store，加载开始===============================
singleSaveAndSaleRadarStore.load({
params: {
makeDate: makeDate,
cityCode: cityCode,
brandId: brandId,
dimGoodsId: standardId,
queryType: "stores",
mtkAndbnsFlag: "bns"
},
callback: function(o, response, success){
//改变标题
//Ext.getCmp("singleSaveAndSaleChartPanel_id").setTitle(makeDate.substr(0, 4) + "年" + makeDate.substr(4, makeDate.length) + "月" + " 全品牌 " + "社会存销比");
Ext.getCmp("singleSaveAndSaleChartPanel_id").setTitle("社会存销比" + " 全省" + " 全品牌 ");
//切换图表绑定
singleSaveAndSaleRadarChart.bindStore(singleSaveAndSaleRadarStore,true);
//重绘图表
singleSaveAndSaleRadarChart.redraw();
}
});
//=====================================单月社会存销比，雷达图store，加载结束===============================
//===============================单月社会存销比，报表chartPanel=========================
var singleSaveAndSaleChartPanel = Ext.create('Ext.form.Panel',{
id: "singleSaveAndSaleChartPanel_id",
layout: {
type: 'hbox',
align: 'stretch'
},
title: "社会存销比",
items: [singleSaveAndSaleColumnChart,singleSaveAndSaleRadarChart]
}
);
//======================================end==================================
分享到：
相关推荐
在“extjs 图表制作”这个主题中，我们将深入探讨如何利用ExtJS来制作各种统计图表，以及这在数据可视化中的重要性。 1. **ExtJS图表基础** - ExtJS的图表组件是基于Sencha Chart模块，它提供了一套完整的2D和3D...
其Charts组件是该框架中的一个重要部分，提供了丰富的图表功能，适用于数据可视化。在本文中，我们将深入探讨Ext JS 4 Charts，包括其核心概念、特性、图表类型以及如何创建和配置图表。 1. **核心概念** - **...
本文将深入探讨“Extjs扩展DateTimeField时间初始化及点击日期显示Bug”这一主题，帮助开发者解决实际开发中遇到的难题。 DateTimeField是EXTJS中用于处理日期和时间选择的组件，它允许用户同时选择日期和时间，...
除了基本的图片展示，ExtJS还支持更复杂的图片渲染效果，如使用CSS3的过渡和动画效果，以及在图表组件中添加自定义图标等。例如，我们可以在CSS中定义图片的过渡效果： ```css .ext-image { transition: opacity ...
ExtJS图表的基础类是`Ext.chart.Chart`，你可以创建一个新的实例并设置相关属性，如宽度、高度、标题、图例、X轴和Y轴的配置、系列（数据系列）等。以下是一个简单的柱状图示例： ```javascript Ext.application({ ...
extjs图表js代码
ExtJS 是一个强大的JavaScript框架，主要...综上所述，使用ExtJS构建时间轴涉及到组件设计、数据模型、布局渲染、用户交互等多个方面。通过熟练掌握这些知识点，我们可以创建出高效、可定制且具有吸引力的时间轴应用。
此外，EXTJS还支持多种数据源，可以与后端数据库或其他数据服务无缝对接，实时更新图表数据。 EXTJS的图形组件不仅适用于数据可视化，还适合构建仪表盘和报告，为企业决策提供直观的数据支持。它们可以与其他EXTJS...
根据提供的文件信息，本文将详细解析ExtJS 4中如何处理不同类型的Store及与之相关的数据操作、模型定义以及前端展示等内容。 ### ExtJS 4中的Store与数据管理 #### Store概念简介 在ExtJS 4中，Store是用于存储...
4. **自定义代码**：在某些情况下，可能需要编写自定义JavaScript代码来处理复杂的动态布局需求，例如在Panel初始化后或容器尺寸改变时手动调用`doLayout`方法来更新布局。 在提供的压缩包文件中，`TestAuoMaxPanel...
2. **Grid的使用**：ExtJS的数据网格（Grid）组件是一个强大的表格展示工具，可以用来展示大量结构化的数据。它支持分页、排序、过滤、编辑等功能，并且可以与后台数据源进行双向绑定。在示例中，可能展示了如何创建...
`xField`和`yField`分别对应数据模型中的字段，用来决定条形图的X轴和Y轴值。 当你运行这段代码，ExtJS将会向后端请求JSON数据，解析数据后填充到条形图中，从而呈现出动态的效果。这种炫酷的视觉展示对于提升网站...
Extjs对分页、表单验证、表单组件的布局与初始化都提供了详细的指导，使得表单元素的开发更加高效。 表格组件GridPanel是Extjs中的亮点之一，它不仅可以展示大量数据，还支持复杂的列模型和行操作。此外，GridPanel...
预加载会在初始化时加载所有节点，适合数据量较小的情况。按需加载仅在节点展开时请求子节点数据，适用于大数据量的场景，能提高性能并减少初次加载时间。 7. **treetest.js示例**: 这个文件可能是实现动态树的示例...
1.从后端请求数据并运用到图表中，形成动态数据。 2.查询出每年各个月中人数。 3.改变条形柱的颜色，改变默认的颜色换成自己想要的颜色。 renderer: function(sprite, storeItem, barAttr, i, store) { barAttr....
系列通常对应于你要展示的数据，而x轴和y轴则定义了数据的坐标系。数据可以动态加载，也可以预定义在JSON文件中。在与PHP结合时，可以通过AJAX请求从服务器获取数据。 例如，在提供的"Highstock_ExtJs_4-master...
本压缩包包含的是不同版本的ExtJs API文档，分别是3.1.1、3.3.1和2.X版本。 3.1.1版本的API是英文版，它涵盖了ExtJs的核心功能和组件，包括布局管理、表单元素、数据绑定、事件处理、菜单和工具提示等。在这一版本...
它提供了大量的组件和功能，包括数据网格、图表、表单、菜单等，使得开发者能够创建具有桌面应用般用户体验的Web应用。在图形化开发环境中，利用合适的工具可以极大地提高开发效率，这就是Eclipse的ExtJS图形化开发...