如何在Sencha Touch 2中使用Highchart仪表盘？

Question

如何在Sencha Touch 2中使用Highchart仪表盘？

javascripthighchartssencha-touch-2

4

我正在尝试在Sencha Touch 2.3.1中使用Highcharts

我正在使用JoKuan的这个库

高级图表似乎没有渲染，但容器已被分配了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包含以下内容：
requires: [ '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显示原始数据包括：
raw: Object BaseValue: 0 CentreValue: 756.79 CurrentValue: 413.55 Generated: "/Date(1399375165754+0100)/" Title: "Order Value Today" Type: 1

我查看了这篇文章，并按照建议进行了更改，但仍然没有成功。

- Jez D

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hristo Ivanov · Accepted Answer

我从未使用过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，它在我的Vp中的某个地方。

  {
    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 store分配为图表的数据。这里是JsFiddle。请给我反馈。