有没有人能够将图表和图形合并到 Sencha Touch 中？
如果是这样，一个例子将不胜感激。
谢谢
问问题
10268 次
7 回答
4
我的印象是 Raphael ( http://raphaeljs.com/ ) 最终将被纳入 Sencha Touch 的图形组件 ( http://g.raphaeljs.com/ )。在那之前，您可以很容易地只包含额外的 Raphael .js 文件并以这种方式制作图表。就像是：
<script src="sencha-touch-1.0/sencha-touch-debug.js" type="text/javascript" charset="utf-8"></script>
<!-- Raphael JS -->
<script src="raphael/raphael-min.js" type="text/javascript" charset="utf-8"></script>
<script src="raphael/g.raphael-min.js" type="text/javascript" charset="utf-8"></script>
<script src="raphael/g.pie-min.js" type="text/javascript" charset="utf-8"></script>
<script src="raphael/g.line-min.js" type="text/javascript" charset="utf-8"></script>
<script src="raphael/g.bar-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
Ext.setup({
onReady: function()
{
// Set up main panel!
var tabPanel = new Ext.Panel
({
fullscreen: true,
html: '<div id="graph"></div>'
});
// Try to draw a graph!
var r = Raphael('graph');
r.g.txtattr.font = '12px Helvetica, Arial, sans-serif';
r.g.text(150, 250, "Demo chart with title");
r.g.linechart(10, 10, 300, 220, [[1, 2, 3, 4, 5, 6, 7],[3.5, 4.5, 5.5, 6.5, 7, 8]], [[12, 32, 23, 15, 17, 27, 22], [10, 20, 30, 25, 15, 28]], {nostroke: false, axis: "0 0 1 1", symbol: "o", smooth: true});
}
});
</script>
于 2010-11-22T14:39:17.303 回答
4
看看http://code.google.com/p/oppo-touching/。有人已经将图表转移到 Snecha Touch。还有消息称下一版 Sencha Touch 将包含图表。
于 2011-04-20T13:14:05.327 回答
0
这是 Sencha Touch 中示例图表的代码
var SampleLineChart = new Ext.chart.Chart({
fullscreen : true,
iconCls: 'line',
cls: 'chartpanel',
theme: 'Energy',
interactions: [ 'reset',
{
type: 'panzoom',
axes: {
right: {}
}
},
{
type: 'iteminfo',
gesture: 'tap',
listeners: {
show: function(interaction, item, panel) {
// Ext.dispatch({
// controller : 'Users',
// action : 'popupInfoAbtChart',
// data : {item:item, panel:panel}
// });
}
}
}],
animate: false,
store: EnergyApp.stores.ChartStore, //choose for consumption
axes: [{
type: 'Numeric',
position: 'right',
minimum: 0,
majorTickSteps : 10,
minorTickSteps : 5,
fields: ['generatedpv', 'buildcons','excessPV'],
title: 'Y-axis title'
},
{
type: 'Category',
position: 'bottom',
fields: ['day'],
title: 'X-axis title',
label: {
rotate: {
degrees: 45
}
}
}],
legend: {
position: Ext.is.Phone ? 'left' : 'top'
},
series: [{
type: 'line',
highlight: false,
showMarkers: true,
fill: false,
smooth: true,
axis: 'right',
xField: 'day',
yField: 'generatedpv',
title: 'Field 1
},
{
type: 'line',
highlight: false,
showMarkers: true,
fill: false,
smooth: true,
axis: 'right',
xField: 'day',
yField: 'buildcons',
title: 'Field 2
}],
listeners: {
afterrender: function(me) {
me.on('beforerefresh', function() {
if (me.ownerCt.getActiveItem().id !== me.id) {
return false;
}
}, me);
}
}
});
有关更多代码示例，请查看 Sencha-Touch-Charts 示例文件夹中的 EnergyApp 示例。它被描绘得很好
于 2012-03-06T05:08:01.513 回答
0
Sencha 的带有图表 api 的包存在（http://dev.sencha.com/deploy/touch-charts-beta/examples/），但似乎很难集成到 sencha 触摸解决方案中（文件依赖，函数未在一些版本的 sencha touch 包）。
我找到的解决方案是安装已经包含图形api的Sencha Architect试用版，创建一个移动项目（触摸项目）并将其打包。然后我就有了一个具有正确依赖关系的完整包，我可以在不依赖 Sencha Architect 的情况下重用它。
于 2013-03-17T08:56:42.577 回答
0
他们现在有一些例子。他们应该帮助http://dev.sencha.com/deploy/touch-charts-beta/examples/
于 2011-08-06T18:12:48.317 回答
0
这是 Sencha 论坛的链接，其中包含一些如何将图表合并到现有 Sencha Touch 2.0 应用程序中的示例：
于 2012-05-02T14:49:55.777 回答