Extjs 如何将雪碧添加到sencha触摸图
我在窗口面板中有sencha甜甜圈图表，在另一个面板中有文本精灵。但是我需要将这个精灵与甜甜圈图表集成，这样如果我移动图表，添加的文本精灵就会相应地移动 这是我的密码：Extjs 如何将雪碧添加到sencha触摸图,extjs,Extjs,我在窗口面板中有sencha甜甜圈图表，在另一个面板中有文本精灵。但是我需要将这个精灵与甜甜圈图表集成，这样如果我移动图表，添加的文本精灵就会相应地移动 这是我的密码： Ext.setup({ tabletStartupScreen: 'tablet_startup.jpg', phoneStartupScreen: 'phone_startup.jpg', tabletIcon: 'icon-ipad.png', phoneIcon: 'icon-iphone.
Ext.setup({
tabletStartupScreen: 'tablet_startup.jpg',
phoneStartupScreen: 'phone_startup.jpg',
tabletIcon: 'icon-ipad.png',
phoneIcon: 'icon-iphone.png',
glossOnIcon: false,
requires: ['Ext.chart.Panel',
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category',
'Ext.chart.series.Pie'],
onReady: function () {
var donut = false;
window.initExample('Pie Chart',
"This example's uses many interactions.<br><ul>" +
"<li>Dragging the Pie Chart will rotate it.</li>" +
"<li>Tap and hold will bring up additional information about a slice</li>" +
"<li>Double-Tap will reset the chart back to the initial state (after confirmation)</li>");
window.createPanel(new Ext.chart.Chart({
themeCls: 'pie1',
theme: 'Demo',
store: store1,
shadow: false,
animate: true,
insetPadding: 20,
legend: {
position: 'left'
},
interactions: [
{
type: 'reset',
confirm: true
},
{
type: 'rotate'
},
'itemhighlight',
{
type: 'iteminfo',
gesture: 'longpress',
listeners: {
show: function (interaction, item, panel) {
var storeItem = item.storeItem;
panel.setHtml(['<ul><li><b>Month: </b>' + storeItem.get('name') + '</li>', '<li><b>Value: </b> ' + storeItem.get('2007') + '</li></ul>'].join(''));
}
}
}
],
series: [
{
type: 'pie',
field: '2007',
showInLegend: true,
highlight: false,
donut: 50,
listeners: {
'labelOverflow': function (label, item) {
item.useCallout = true;
}
},
// Example to return as soon as styling arrives for callouts
callouts: {
renderer: function (callout, storeItem) {
callout.label.setAttributes({
text: storeItem.get('name')
}, true);
},
filter: function () {
return false;
},
box: {
//no config here.
},
lines: {
'stroke-width': 2,
offsetFromViz: 20
},
label: {
font: 'italic 14px Arial'
},
styles: {
font: '14px Arial'
}
},
label: {
field: 'name'
}
}
]
}));
mydrawComponent = new Ext.draw.Component({
id:'mydrawComponent',
fill:'blue',
height: '100%',
width: '100%',
fullscreen: true,
items: [{type: 'text',
'text-anchor':'center',
fill: 'black',
font: '20px Arial',
text: 'Investment',
x: 860,
y: 380,
zIndex: 2},
{type: 'text',
'text-anchor':'center',
fill: 'black',
font: 'Bold 30px Arial',
text: '$165m',
x: 860,
y: 410,
zIndex: 3}]
}).show();
new Ext.chart.Panel({
fullscreen: true,
title: 'Text',
items: mydrawComponent
});
}
});
Ext.setup({
TabletStartup屏幕：“tablet_startup.jpg”，
phoneStartupScreen:'phone_startup.jpg'，
tabletIcon:'icon ipad.png'，
phoneIcon:'icon iphone.png'，
格洛松尼康：错，
需要：['Ext.chart.Panel'，
“Ext.chart.axis.Numeric”，
“外部图表轴类别”，
“Ext.chart.series.Pie']，
onReady:function（）{
var donut=false；
initExample（'饼图'，
“此示例使用了许多交互。
”+
“- 拖动饼图将使其旋转。
”+
“- 点击并按住将显示有关切片的附加信息”+
“
- 双击将图表重置回初始状态（确认后）
”；
createPanel（新的Ext.chart.chart({
主题是：“pie1”，
主题：“演示”，
店面：店面1，
影子：错，
动画：对，
插入：20，
图例：{
位置：'左'
},
互动：[
{
键入：“重置”，
确认：正确
},
{
键入：“旋转”
},
“项目突出显示”，
{
键入：“iteminfo”，
手势：“长按”，
听众：{
显示：功能（交互、项目、面板）{
var storeItem=item.storeItem；
panel.setHtml（['- 月：'+storeItem.get（'name'）+'
'，'- 值：'+storeItem.get（'2007'）+'
']）。连接（''）；
}
}
}
],
系列：[
{
键入“pie”，
字段：“2007”，
showInLegend：是的，
推荐理由：错，
甜甜圈：50，
听众：{
“labelOverflow”：函数（标签、项）{
item.useCallout=true；
}
},
//详图索引的样式一到即返回的示例
标注：{
渲染器：函数（详图索引、storeItem）{
callout.label.setAttributes({
文本：storeItem.get（'name'））
}，对）；
},
过滤器：函数（）{
返回false；
},
方框：{
//这里没有配置。
},
线路：{
“笔划宽度”：2，
抵销额：20
},
标签：{
字体：“italic 14px Arial”
},
风格：{
字体：“14px Arial”
}
},
标签：{
字段：“名称”
}
}
]
}));
mydrawComponent=新的Ext.draw.Component({
id:'mydrawComponent'，
填充：'蓝色'，
高度：“100%”，
宽度：“100%”，
全屏：对，
项目：[{type:'text'，
“文本锚定”：“中心”，
填充：“黑色”，
字体：“20px Arial”，
正文:"投资",，
x:860，
y:380，
zIndex:2}，
{type:'text'，
“文本锚定”：“中心”，
填充：“黑色”，
字体：“粗体30px Arial”，
正文：“1.65亿美元”，
x:860，
y:410，
zIndex:3}]
}).show（）；
新的Ext.chart.Panel({
全屏：对，
标题：“文本”，
项目：mydrawComponent
});
}
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="../CSS/sencha-touch.css" type="text/css">
<link rel="stylesheet" href="../CSS/touch-charts-demo.css" type="text/css">
<title>Donut Chart</title>
<script type="text/javascript" src="../JS/sencha-touch.js"></script>
<script type="text/javascript" src="../JS/touch-charts.js"></script>
<script type="text/javascript" src="../JS/examples.js"></script>
<script type="text/javascript" src="donutchart.js"></script>
</head>
<body></body>
</html>
油炸圈饼图