パネルにチャートを追加しようとしています。ただし、グラフはレンダリング直後に消えます (1 秒ほど表示されます)。タイトルは残っていますが、それ以外はすべて失われています (レジェンドを含む)
Ext.define('MyProject.view.FoodDetail', {
extend: 'Ext.panel.Panel',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
xtype: 'panel',
// width: '100%',
height: 350,
reference: 'pieContainer'
}
]
})
次に、コントローラーで、このように円グラフを pieContainer に追加します (キッチン シンクの例と同様)。
setPie: function (myStore) {
var chartContainer = this.lookupReference('pieContainer')
chartContainer.add({
xtype: 'polar',
height: 350,
store: arrayStore,
insetPadding: 50,
innerPadding: 20,
reference: 'foodPieChart',
legend: {
docked: 'bottom'
},
interactions: ['rotate', 'itemhighlight'],
sprites: [
{
type: 'text',
text: 'Food composition',
font: '22px Helvetica',
width: 100,
height: 30,
x: 40, // the sprite x position
y: 20 // the sprite y position
}
],
series: [{
type: 'pie',
angleField: 'amount',
label: {
field: 'category',
display: 'outside',
calloutLine: {
length: 60,
width: 3
// specifying 'color' is also possible here
}
},
highlight: true,
tooltip: {
trackMouse: true,
renderer: function (storeItem, item) {
this.setHtml(storeItem.get('category') + ': ' + storeItem.get('amount'))
}
}
}]
})
}
renderTo などをいじってみましたが、何が起こっているのかわかりません。