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

Posted

技术标签:

【中文标题】如何让 Highchart Gauge 在 Sencha Touch 2 中工作【英文标题】:How to get Highchart Gauge to work in Sencha Touch 2 【发布时间】:2014-05-06 11:47:24 【问题描述】:

尝试在 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 有: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 中没有显示错误

商店看起来不错,console.log 显示原始数据包括:raw: Object BaseValue: 0 CentreValue: 756.79 CurrentValue: 413.55 Generated: "/Date(1399375165754+0100)/" Title: "Order Value Today" Type: 1

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

【问题讨论】:

【参考方案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。给我写反馈意见。

【讨论】:

谢谢。我将renderTo 添加到chartConfig: 并解决了问题 @Hristo_Ivanov 现在的问题是图表没有出现在生产版本或测试版本中。具有 highcharts id 的容器已创建,但未填充。 如果你还没有在css中给<div>一个特定的高度

以上是关于如何让 Highchart Gauge 在 Sencha Touch 2 中工作的主要内容,如果未能解决你的问题,请参考以下文章

如何在 R 中设置 highchart 全局选项

如何重用prometheus Gauge metric?

无法启动 Gauge Intellij 插件

如何在 WebPartZone 中加载 highchart 脚本

如何更改 Highchart 中图例的布局和对齐方式?

如何在 HighChart 的 yAxis 上仅显示整数值?