導航:首頁 > 編程語言 > extjschartaxis

extjschartaxis

 發布時間：2023-05-17 23:24:59

❶ Extjs做chart表時，在給柱子設置了寬度之後，就錯位了，怎麼和下面的文字對齊呢

我的也是，你用的是不是Extjs 4.X 或磨棚猛瞎橋者以下的？這貌和皮似是個bug，在Extjs5下運行不錯位。

❷ 新手求助，extjs4 chart的問題

java">Ext.require('Ext.chart.*');
Ext.require(['Ext.Window','Ext.fx.target.Sprite','Ext.layout.container.Fit','Ext.window.MessageBox']);

Ext.onReady(function(){
window.store1=Ext.create('Ext.data.JsonStore',{
fields:['speed1','num'],
data:[{
"speed1":"71",
"num":"10"
},{
"speed1":"63",
"num":"11"
},{
"speed1":"77",
"num":"12"
},{
"speed1":"85",
"num":"13"
},{
"speed1":"79",
"num":"14"
}
]
});
varchart=Ext.create('Ext.chart.Chart',{
xtype:'chart',
style:'background:#fff',
animate:true,
store:store1,
shadow:true,
theme:'Category1',
legend:{
position:'right'
},
axes:[{
type:'Numeric',
minimum:0,
position:'left',
fields:['speed1'],
title:'NumberofHits',
//minorTickSteps:1,
grid:{
odd:{
opacity:1,
fill:'#ddd',
stroke:'#bbb',
'stroke-width':0.5
}
}
},{
type:'Category',
position:'bottom',
fields:['num'],
title:'MonthoftheYear'
}],
series:[{
type:'line',
highlight:{
size:20,
radius:7
},
tips:{
trackMouse:true,
width:80,
height:40,
renderer:function(storeItem,item){
this.setTitle(storeItem.get('num'));
this.update(storeItem.get('speed1'));
}
},
axis:'left',
//smooth:true,//平滑線條
fill:true,//填充面積
xField:['num'],
yField:['speed1'],
markerConfig:{
type:'circle',//cross是叉叉，這個是圓圈
size:4,
radius:4,
'stroke-width':0
}
}]
});


varwin=Ext.create('Ext.Window',{
width:800,
height:600,
minHeight:400,
minWidth:550,
hidden:false,
maximizable:true,
title:'LineChart',
renderTo:Ext.getBody(),
layout:'fit',
tbar:[{
text:'SaveChart',
handler:function(){
Ext.MessageBox.confirm('ConfirmDownload','?',function(choice){
if(choice=='yes'){
chart.save({
type:'image/png'
});
}
});
}
}],
items:chart
});
});

❸ extjs4.0折線圖如何獲取動態數據

需要把你的action返回的json數據樣本貼出來看看結構

❹ extjs中動態表的橫坐標分組問題

你用一下labelRenderer，例子如下
var chart = new Ext.chart.LineChart({
height: 300,
width: 600,
store: store,
xField: "datetime",
yField: "temp",
// This one, and the config parameter yAxis is not documented either.
xAxis: new Ext.chart.TimeAxis({
labelRenderer: function(date) { return date.format("H"); } //這里你加一下
}),
renderTo: "chart",
});

❺ Extjs中做Chart柱狀圖統計時怎麼限制柱子的最大寬度

加樣式
例子
series: [
{
type: 'column',
axis: 'left',
highlight: true,

style: { width: 10 },//這里是寬度

tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data'
}
]
});

❻ Extjs5 chart 圖表的問題

因為ExtChart不包含在Ext-all中，把這個ext-charts.js包含進來就Ok了

❼ Extjs 4.2 chart中如何自定義legend 圖列

直接在series裡面加一個title屬性用來要定義的名稱

❽ 怎麼用ExtJs 的chart做出這樣的獎金池變化圖：

這是標準的堆疊圖
給你來個例子研究一下

Ext.define('ChartsKitchenSink.view.charts.column.Stacked', {
extend: 'Ext.Panel',
xtype: 'stacked-column',

initComponent: function() {
var me = this;

this.myDataStore = Ext.create('Ext.data.JsonStore', {
fields: ['month', 'data1', 'data2', 'data3', 'data4' ],
data: [
{ month: 'Jan', data1: 20, data2: 37, data3: 35, data4: 4 },
{ month: 'Feb', data1: 20, data2: 37, data3: 36, data4: 5 },
{ month: 'Mar', data1: 19, data2: 36, data3: 37, data4: 4 },
{ month: 'Apr', data1: 18, data2: 36, data3: 38, data4: 5 },
{ month: 'May', data1: 18, data2: 35, data3: 39, data4: 4 },
{ month: 'Jun', data1: 17, data2: 34, data3: 42, data4: 4 },
{ month: 'Jul', data1: 16, data2: 34, data3: 43, data4: 4 },
{ month: 'Aug', data1: 16, data2: 33, data3: 44, data4: 4 },
{ month: 'Sep', data1: 16, data2: 32, data3: 44, data4: 4 },
{ month: 'Oct', data1: 16, data2: 32, data3: 45, data4: 4 },
{ month: 'Nov', data1: 15, data2: 31, data3: 46, data4: 4 },
{ month: 'Dec', data1: 15, data2: 31, data3: 47, data4: 4 }
]
});

me.items = [{
xtype: 'chart',
width: '100%',
height: 410,
padding: '10 0 0 0',
animate: true,
shadow: false,
style: 'background: #fff;',
legend: {
position: 'bottom',
boxStrokeWidth: 0,
labelFont: '12px Helvetica'
},
store: this.myDataStore,
insetPadding: 40,
items: [{
type : 'text',
text : 'Column Charts - Stacked Columns',
font : '22px Helvetica',
width : 100,
height: 30,
x : 40, //the sprite x position
y : 12 //the sprite y position
}, {
type: 'text',
text: 'Data: Browser Stats 2012',
font: '10px Helvetica',
x: 12,
y: 380
}, {
type: 'text',
text: 'Source: http://www.w3schools.com/',
font: '10px Helvetica',
x: 12,
y: 390
}],
axes: [{
type: 'Numeric',
position: 'left',
grid: true,
fields: ['data1'],
label: {
renderer: function(v) { return v + '%'; }
},
minimum: 0
}, {
type: 'Category',
position: 'bottom',
grid: true,
fields: ['month'],
label: {
rotate: {
degrees: -45
}
}
}],
series: [{
type: 'column',
axis: 'left',
title: [ 'IE', 'Firefox', 'Chrome', 'Safari' ],
xField: 'month',
yField: [ 'data1', 'data2', 'data3', 'data4' ],
stacked: true,
style: {
opacity: 0.80
},
highlight: {
fill: '#000',
'stroke-width': 1,
stroke: '#fff'
},
tips: {
trackMouse: true,
style: 'background: #FFF',
height: 20,
renderer: function(storeItem, item) {
var browser = item.series.title[Ext.Array.indexOf(item.series.yField, item.yField)];
this.setTitle(browser + ' for ' + storeItem.get('month') + ': ' + storeItem.get(item.yField) + '%');
}
}
}]
}];

this.callParent();
}
});

Code Preview
Ext.define('ChartsKitchenSink.view.charts.column.Stacked', {
extend: 'Ext.Panel',
xtype: 'stacked-column',

initComponent: function() {
var me = this;

this.myDataStore = Ext.create('Ext.data.JsonStore', {
fields: ['month', 'data1', 'data2', 'data3', 'data4' ],
data: [
{ month: 'Jan', data1: 20, data2: 37, data3: 35, data4: 4 },
{ month: 'Feb', data1: 20, data2: 37, data3: 36, data4: 5 },
{ month: 'Mar', data1: 19, data2: 36, data3: 37, data4: 4 },
{ month: 'Apr', data1: 18, data2: 36, data3: 38, data4: 5 },
{ month: 'May', data1: 18, data2: 35, data3: 39, data4: 4 },
{ month: 'Jun', data1: 17, data2: 34, data3: 42, data4: 4 },
{ month: 'Jul', data1: 16, data2: 34, data3: 43, data4: 4 },
{ month: 'Aug', data1: 16, data2: 33, data3: 44, data4: 4 },
{ month: 'Sep', data1: 16, data2: 32, data3: 44, data4: 4 },
{ month: 'Oct', data1: 16, data2: 32, data3: 45, data4: 4 },
{ month: 'Nov', data1: 15, data2: 31, data3: 46, data4: 4 },
{ month: 'Dec', data1: 15, data2: 31, data3: 47, data4: 4 }
]
});

me.items = [{
xtype: 'chart',
width: '100%',
height: 410,
padding: '10 0 0 0',
animate: true,
shadow: false,
style: 'background: #fff;',
legend: {
position: 'bottom',
boxStrokeWidth: 0,
labelFont: '12px Helvetica'
},
store: this.myDataStore,
insetPadding: 40,
items: [{
type : 'text',
text : 'Column Charts - Stacked Columns',
font : '22px Helvetica',
width : 100,
height: 30,
x : 40, //the sprite x position
y : 12 //the sprite y position
}, {
type: 'text',
text: 'Data: Browser Stats 2012',
font: '10px Helvetica',
x: 12,
y: 380
}, {
type: 'text',
text: 'Source: http://www.w3schools.com/',
font: '10px Helvetica',
x: 12,
y: 390
}],
axes: [{
type: 'Numeric',
position: 'left',
grid: true,
fields: ['data1'],
label: {
renderer: function(v) { return v + '%'; }
},
minimum: 0
}, {
type: 'Category',
position: 'bottom',
grid: true,
fields: ['month'],
label: {
rotate: {
degrees: -45
}
}
}],
series: [{
type: 'column',
axis: 'left',
title: [ 'IE', 'Firefox', 'Chrome', 'Safari' ],
xField: 'month',
yField: [ 'data1', 'data2', 'data3', 'data4' ],
stacked: true,
style: {
opacity: 0.80
},
highlight: {
fill: '#000',
'stroke-width': 1,
stroke: '#fff'
},
tips: {
trackMouse: true,
style: 'background: #FFF',
height: 20,
renderer: function(storeItem, item) {
var browser = item.series.title[Ext.Array.indexOf(item.series.yField, item.yField)];
this.setTitle(browser + ' for ' + storeItem.get('month') + ': ' + storeItem.get(item.yField) + '%');
}
}
}]
}];

this.callParent();
}
});

❾ extjs3.0 chart 數值不在網格上，豎坐標間隔

你如果不設置，那就是extjs自動設置的，他會根據數升祥型值，自動設置間隔。
你也可吵猜以嘗試在axes的y軸設置majorTickSteps和minorTickSteps來控制刻度顆粒度宴拆

❿ extjs 3中怎麼給linechart坐標的y軸坐標設置最大值和最小值

<!-- vertical axis ** minorInterval:y軸線條的間隔 interval:y軸數值的間隔,maximum：y軸最大值 , minimum：y軸最小值 -->
<mx:verticalAxis>
<mx:LinearAxis id="linearAxis"
baseAtZero="false"
title="Price (USD)"
minorInterval="0.10"
interval="0.5"
maximum="78" minimum="0"
labelFunction="linearAxis_labelFunc" />
</mx:verticalAxis>

<!-- horizontal axis -->
<mx:horizontalAxis>
<mx:CategoryAxis id="ca"
categoryField="@date"
title="Date" />
</mx:horizontalAxis>

<!-- horizontal axis renderer -->
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{ca}"
canDropLabels="true" />
</mx:horizontalAxisRenderers>

<!-- series -->
<mx:series>
<mx:LineSeries yField="@open"
displayName="Open" />
</mx:series>
</mx:LineChart>

</mx:Application>

閱讀全文

與extjschartaxis相關的資料

熱點內容
cad新文件能找回來嗎 瀏覽：951
導出手機qq文件到u盤 瀏覽：456
電腦如何打開ppt文件怎麼打開方式 瀏覽：782
魅族鎖定區文件夾 瀏覽：357
刻字cnc怎麼編程 瀏覽：182
學校的網路拓撲結構圖 瀏覽：784
收集100個pdf文件里關鍵詞 瀏覽：594
蘋果關閉4g網路設置 瀏覽：289
如何監測資料庫 瀏覽：967
拷貝過來的pdf文件 瀏覽：751
抖音小店的訪客數據怎麼看 瀏覽：670
怎麼把c語言編程的字元向下移動 瀏覽：786
sql刪除文件組代碼 瀏覽：978
安卓post請求多重json 瀏覽：776
微信消除數據怎麼恢復 瀏覽：918
小米刷機顯示系統找不到指定文件 瀏覽：528
蘋果手機小風扇圖app叫什麼 瀏覽：292
繁體中文輸入工具 瀏覽：916
pc桌面壁紙文件夾 瀏覽：473
微信怎麼添加群 瀏覽：781

友情鏈接