DIV 태그에 EXTJS 막대 차트 샘플을로드합니다
-
20-12-2019 - |
문제
ExtJS 4.2.1을 이해하고 작업하려고 노력하는 초보자입니다.나는 차트와 그리드를 정말로 좋아하고 현재 응용 프로그램에 그들을 통합하고 싶었습니다.샘플 그리드가 내 응용 프로그램에서 작동하지만 차트는 조금 더 어려워 지기로 바뀝니다.
샘플 코드를 사용했습니다.샘플 코드 다른 창에서 차트를 렌더링하고 누군가가 내 패널 중 하나에서 div 태그에 이것을 도울 수 있는지 궁금해하고있었습니다.
여기에있는 컨테이너가 다음과 같습니다.
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:false">
<div id="container"></div>
</div>
.
및 차트 스크립트 : Charts.js
Ext.require('Ext.chart.*');
.
ext.require ([ 'ext.window', 'ext.fx.target.sprite', 'ext.layout.container.fit']);
ext.onready (함수 () { var textArea;
var store = new Ext.data.JsonStore({
fields: ['name', 'visits', 'views'],
data: [
{ name: 'Jul 07', visits: 245000, views: 3000000 },
{ name: 'Aug 07', visits: 240000, views: 3500000 },
{ name: 'Sep 07', visits: 355000, views: 4000000 },
{ name: 'Oct 07', visits: 375000, views: 4200000 },
{ name: 'Nov 07', visits: 490000, views: 4500000 },
{ name: 'Dec 07', visits: 495000, views: 5800000 },
{ name: 'Jan 08', visits: 520000, views: 6000000 },
{ name: 'Feb 08', visits: 620000, views: 7500000 }
]
});
.
ext.define ( 'ext.chart.theme.customblue', { 확장 : 'ext.chart.theme.base',
constructor: function (config) {
var titleLabel = {
font: 'bold 18px Arial'
}, axisLabel = {
fill: 'rgb(8,69,148)',
font: '12px Arial',
spacing: 2,
padding: 5
};
this.callParent([Ext.apply({
axis: {
stroke: '#084594'
},
axisLabelLeft: axisLabel,
axisLabelBottom: axisLabel,
axisTitleLeft: titleLabel,
axisTitleBottom: titleLabel
}, config)]);
}
});
var chart = Ext.create('Ext.chart.Chart', {
animate: true,
shadow: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Month of the Year'
}],
theme: 'CustomBlue',
background: {
gradient: {
id: 'backgroundGradient',
angle: 45,
stops: {
0: {
color: '#ffffff'
},
100: {
color: '#eaf1f8'
}
}
}
},
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: ['data1']
}]
renderTo: "container"
});
.
});
해결책
문제가 무엇인지 설명하지 않았지만 코드를 보면서 꽤 분명합니다.
문제는 적절하게 크기가 필요하기 때문에 차트를 너비 / 높이에 제공해야한다는 것입니다.문서의 원래 예에서는 창에서 사용되는 fit
레이아웃에 의해 명시 적으로 치수가 제공됩니다.
제휴하지 않습니다 StackOverflow