有人能够将图表和图形纳入Sencha Touch吗？
如果可以，希望能提供一个例子。
谢谢。
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>
- endemic
2
现在，Sencha Touch支持图表。自ST 2.1版本发布以来，可以使用它。请查看此链接，向下滚动到“更新的Sencha Architect”部分，在那里您会找到有关Touch Charts的视频。 - weerd2
如果你想使用开源图表，你可以在Sencha Touch中使用OpenCharts: https://github.com/woodenconsulting/OpenCharts-For-Sencha-Touch-and-ExtJS - Jeff Wooden
4
请看http://code.google.com/p/oppo-touching/。已经有人将图表移植到Sencha Touch中。此外，有消息称Sencha Touch的下一个版本将包括图表功能。
- Huang
1
现在，Sencha Touch官方支持图表包。它在ExtJS变体的基础上显著增加了更多功能（例如触摸交互）。 - James Pearce
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示例。它已经被很好地描述了。
- SashaZd
0
这里有一个链接，指向一个Sencha论坛，其中提供了一些示例，说明如何将图表集成到现有的Sencha Touch 2.0应用程序中：
- Soenhay
0
在Sencha中，有一个图表API的包存在（http://dev.sencha.com/deploy/touch-charts-beta/examples/），但它似乎很难集成到Sencha Touch解决方案中（文件依赖关系、某些版本的Sencha Touch包中函数未定义）。
我找到的解决方案是安装Sencha Architect试用版，它已经包含了图表API，创建一个移动项目（Touch项目）并打包。然后我就有了一个完整的包，具有正确的依赖关系，而不依赖于Sencha Architect。
- zhoufei
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接