javascript - 如何让 Highchart Gauge 在 Sencha Touch 2 中工作

Question

尝试在 Sencha Touch 2.3.1 中使用 Highcharts

我正在使用 this from JoKuan

highcharts 似乎没有渲染，但容器被分配了 Highcharts ID (ext-highcharts) 和我的代码中的类:

用这个创建的图表:

theGauge = new Ext.create('Chart.ux.Highcharts', {   
  xtype: 'highchart',
  cls: 'ag',//component renders with this class ok
  series:[{
    dataIndex: 'CurrentValue'
  }],
  store: gaugeStore,
  chartConfig: {
    chart: {
      type: 'gauge'
    },
    title: {
      text: 'A simple graph'
    }
  }
});

console.log(theGauge);

这是图表的容器:

chartgx = Ext.Container({
  xtype : 'container',
  flex: 1,
  layout: 'fit',
  items: [], 
  id: 'innerGauge_'+tt+'_'+tt2,
  itemId: 'x-innerGauge_'+tt+'_'+tt2
});

Ext.getCmp('gauge_'+tt+'_'+tt2).add(chartgx); //add inner container to outer container
Ext.getCmp('innerGauge_'+tt+'_'+tt2).add(theGauge); //add gauge to inner container

我的 App.js 有:
要求:[
'Chart.ux.Highcharts',
'Chart.ux.Highcharts.Serie',
'Chart.ux.Highcharts.AreaRangeSerie',
'Chart.ux.Highcharts.AreaSerie',
'Chart.ux.Highcharts.AreaSplineRangeSerie',
'Chart.ux.Highcharts.AreaSplineSerie',
'Chart.ux.Highcharts.BarSerie',
'Chart.ux.Highcharts.ColumnRangeSerie',
'Chart.ux.Highcharts.ColumnSerie',
'Chart.ux.Highcharts.GaugeSerie',
'Chart.ux.Highcharts.LineSerie',
'Chart.ux.Highcharts.PieSerie',
'Chart.ux.Highcharts.RangeSerie',
'Chart.ux.Highcharts.ScatterSerie',
'Chart.ux.Highcharts.SplineSerie',
'Chart.ux.ChartsMobileConfig',
.....]


名为 theGauge 的对象存在于我的源代码中，但看不到仪表图。console.log 中没有显示错误

商店似乎没问题，console.log 显示原始数据包括:
原始:对象
基值:0
中心值:756.79
当前值:413.55
生成:“/日期(1399375165754+0100)/”
标题:“今天的订单值(value)”
类型:1

我看过this post , 并进行了建议的更改，但仍然没有成功。

Answer 1

我从未使用过 Sencha Touch，但我使用过 Sencha Ext JS。

您不需要扩展来混淆 Sencha ExtJS 和 Highcharts。所有 Highchart/HighStock 图表都分配了一个 html div 来呈现它们。您只需要从要用于图表的 Ext Js 元素中获取 html div。这是我的代码中的一个示例，它工作正常:

var myVp = Ext.create('Ext.container.Viewport', {.........}

chart1 = new Highcharts.StockChart({
   chart: {
      renderTo: myVp.down('#Graph1').getEl().dom,
      zoomType: 'x'
   },
............
............
});

这是 Graph1，它在 myVp 的某处

  {
    flex: 8,
    xtype : "component", //i have other examples where the xtype is panel that
                         //work fine. I think this will work with all the type
                         //on containers
    itemId: 'Graph1'
  }

我知道这不完全是您要问的，但我认为这是一个很好的方法。唯一的缺点是您无法将 Sencha 商店指定为图表的数据。这是 JsFiddle .写信给我反馈。