如何让 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 中工作的主要内容,如果未能解决你的问题,请参考以下文章