ExtJs中使用highChart

看到有些人问怎么在ExtJs中使用highChart或echart图表，顿时无语，highChart和echart只是基于jquery的图表工具，在不在extjs写不都一样吗？罢了，几天就简单写一下把图表放到extjs组件中。

为了节省时间，关于highChart的后台读取数据生成图表我在这里就不介绍了，有兴趣的可以看我另外一篇博客。highChart获取后台数据生成图表。

下面讲解如果在Extjs中引入highChart。
效果图:

extjs代码:
只需要添加contentEl属性即可。

<script type="text/javascript">
        Ext.onReady(function() {
            //把tree对象当作返回值返回到该方法
            var store = Ext.create('Ext.data.TreeStore', {
                root : {
                    expanded : true,
                    children : [ {
                        text : "detention",
                        leaf : true
                    }, {
                        text : "homework",
                        expanded : true,
                        children : [ {
                            text : "book report",
                            leaf : true
                        }, {
                            text : "algebra",
                            leaf : true
                        } ]
                    }, {
                        text : "buy lottery tickets",
                        leaf : true
                    } ]
                }
            });

            var treePanel = Ext.create('Ext.tree.Panel', {
                title : 'Simple Tree',
                width : 200,
                height : 150,
                store : store,
                rootVisible : false
            });

            Ext.create('Ext.Viewport', {
                layout : {
                    type : 'border',
                    padding : 5
                },
                defaults : {
                    split : true
                },
                items : [ {
                    region : 'north',
                    collapsible : true,
                    title : 'logo栏',
                    split : true,
                    height : 100,
                    minHeight : 60
                }, {
                    region : 'west',
                    collapsible : true,
                    title : '左侧树形菜单栏',
                    split : true,
                    width : '20%',
                    minWidth : 100,
                    minHeight : 140,
                    items : [ treePanel ]
                //左侧添加树状panel组件。和本实例功能无关
                }, {
                    region : 'center',
                    layout : 'border',
                    border : false,
                    items : [ {
                        region : 'center',
                        title : 'Center',
                        minHeight : 80,
                        contentEl : 'allCharts'
                        //引入所有图表所在的dom元素标签  allCharts为元素id
                    } ]
                }]
            });

        });
    </script>

html代码:

<div id="allCharts">
    <!-- 每个my-charts 样式的div就是一个图表div -->
    <div class="my-charts"  ></div>
    <div class="my-charts"  ></div>
    <div class="my-charts"  ></div>
    <div class="my-charts"  ></div>
    <div class="my-charts"  ></div>
    <div class="my-charts"  ></div>
</div>

在extjs中引入highChart 就是这么简单。如果想把图表放入extjs的别的组件，如panel 等，一样的。在panel 里 添加contentEl属性 ，属性值对应 引入的dom元素id即可。

项目完整代码下载(包括生成图表和引入)：

Extjs4.x引入highChart完整版

Extjs4.x中文chm参考手册下载:
Extjs4.x中文chm参考手册
都是这样啊。使用echart的朋友改改图表的生成代码就好了。引入的方式一样，如果有需要别的关于图表和extjs技术的功能实现不懂，尽管留言