在sencha touch中使用highcharts - 无法渲染空白图表 [英] Using highcharts in sencha touch - Can't render empty chart

问题描述

我试图将一些图表从一个php的web appplication移植到一个Sencha Touche移动应用程序。

我想在我的View页面中放置一个空的图表并用一些jsonp调用dinamycally填充它。
这里是我的视图代码（不是所有的130行...）：

pre $ $ $ $ $ $ $ $ $ b xtype： 'panel'，
scrollable：true，
html：'INSERIRE QUI I GRAFICI E LE TABELLE'，
items：[
{
xtype：'panel'，
layout：'fit'，
html：'AREA PER GRAFICO'，
itemId：'chartRenderPanel'，
margin：'180px'
}，$ b $
xtype：'highchart'，
chartConfig：{
图表：{
类型：'样条线'
}，
title：{
text：'简单的图表'
}，
xAxis：{
plotLines：[{
color ：'＃FF0000'，
width：5，
value：'mar'
}]
}
}
}，
{
xtype：'panel'，
layout：'fit'，
html：'TABELLE AREA'，
itemId：'tableRenderPanel'，
margin： '180px'
}
]
}

是从这个小提琴中获得的 http://jsfiddle.net/marcme/DmsGx/

它适用于小提琴，但不适用于我的移动应用程序：使用chrome进行调试时，我卡在Highcharts.js中：

  update：function（delay）{
 var cdelay = delay || this.updateDelay; 
 if（！this.updateTask）{
 this.updateTask = new Ext.util.DelayedTask（this.draw，this）; 
} 
 this.updateTask.delay（cdelay）; 
}，
  

在控制台中显示Uncaught TypeError：未定义不是函数消息。

请帮忙！ ：）

Lorenzo

解决方案

您必须以不同的方式调用DelayedTask sencha触摸比你在Extjs做。改变这个

  this.updateTask = new Ext.util.DelayedTask（this.draw，this）; b 
 
 
 
 
 
 code> if（Ext.util.DelayedTask）
 this.updateTask = new Ext.util.DelayedTask（this.draw，this）; 
 else 
 this.updateTask = Ext.create（'Ext.util.DelayedTask'，this.draw，this）; 
  

i'm trying to port some highchart charts from a php web appplication to a Sencha Touche mobile app.

I want to put an empty chart in my View page and populate it dinamycally with some jsonp calls. Here's my view code (not all the 130 lines...):

{
xtype : 'panel',
scrollable: true,
html : 'INSERIRE QUI I GRAFICI E LE TABELLE',
items : [
    {
        xtype : 'panel',
        layout : 'fit',
        html : 'AREA PER GRAFICO',
        itemId : 'chartRenderPanel',
        margin: '180px'
    },
    {   //sample code, to be replaced with a consinstent config...
        xtype: 'highchart',
        chartConfig: {
           chart: {
                  type: 'spline'
           },
           title: {
                  text: 'A simple graph'
          },
          xAxis: {
                  plotLines: [{
                  color: '#FF0000',
                  width: 5,
                  value: 'mar'
                  }]
          }
          }
                  },
          {
           xtype : 'panel',
           layout : 'fit',
           html : 'AREA PER TABELLE',
           itemId : 'tableRenderPanel',
           margin: '180px'
        }
        ]
}

The Highchart part is taken from this fiddle http://jsfiddle.net/marcme/DmsGx/

it works on the fiddle but not in my mobile app: debugging with chrome, i get stuck here in the Highcharts.js:

update : function(delay) {
        var cdelay = delay || this.updateDelay;
        if(!this.updateTask) {
            this.updateTask = new Ext.util.DelayedTask(this.draw, this);
        }
        this.updateTask.delay(cdelay);
    },

With "Uncaught TypeError: undefined is not a function " message in the console.

Please, help! : )

Lorenzo

解决方案

You have to call DelayedTask differently in sencha touch than you do in Extjs. Change this

this.updateTask = new Ext.util.DelayedTask(this.draw, this);

to this

if (Ext.util.DelayedTask)
    this.updateTask = new Ext.util.DelayedTask(this.draw, this);
else
    this.updateTask = Ext.create('Ext.util.DelayedTask', this.draw, this);

这篇关于在sencha touch中使用highcharts - 无法渲染空白图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！