[英]How to get Highchart Gauge to work in Sencha Touch 2
尝试将Highcharts与Sencha Touch 2.3.1一起使用
我正在使用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
我看过这篇文章 ,并推荐了修改,但仍然没有成功。
我从未与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 。 写信给我反馈。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.