javascript - Google 可视化与 Ext JS 的集成

Question

在 Ext JS 应用程序中集成谷歌可视化组件（饼图、桑基图、谷歌地图、折线图、直方图等）的最简单方法是什么？

标签： javascriptextjsgoogle-visualizationstatic-librariesxtemplate

Answer 1

找到了将谷歌可视化（图表/图形等）与 Ext JS 应用程序集成的最简单方法。

在应用程序启动时加载的文件中添加以下库：

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"> 
 </script>
    <script type="text/javascript">
      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});
    </script>

现在在 Ext JS 中创建一个 X 模板，如下所示：

    /**
    Author:Krishna Varshney
    Descr:This is a template for using google visualization in Unify Dashboard.
    **/
    Ext.define('Home.view.home.CustomBubbleChart', {
        extend: 'Ext.view.View',
        xtype: 'custombubblechart',
        controller: 'cardtemplatecontroller',
        height: 300,
        width: 200,
        scrollable: false,
        group:'RevenueCharts',
        count:1,
        name:'Revenue By Service Plan',
        parentCard:'revenueBySP',
        margin: '20 10 20 15',
        align: 'stretch',
        flex: 1,
        border: false,
        style: {
            "border-radius": '8px',
            "box-shadow": "4px 4px 10px 4px rgba(0.2,0.2,0.2,0.2)"
        },
        itemSelector: 'div.bubble-item-wrap',
        initComponent: function () {
            var me = this;
            Ext.apply(me, {
                store: new Ext.data.JsonStore({
                    storeId: me.storeId,
                    data: [{
                        headerValue:'Revenue By Service Plan'
                    }],
                    fields: ['id', 'headerValue'],
                }),
                tpl: me.createTpl()
            });
            me.callParent(arguments);
        },
        listeners:{
            itemclick: 'onMenuItemClick',
            afterrender:'onAfterRenderCharts'
        },
        createTpl: function () {
            var me = this;

            return new Ext.XTemplate(
                '<div class="bubble-item-wrap mb5" style="padding:10px;height:280px;width:410px">',
                    '<div style="background-color:#157fcc;border-radius: 8px 8px 0px 0px;height: 3px;margin-top: -10px;width: 405px;margin-left: -10px;" class="color-band">','<div class="card-header" style="font-size: 16px;text-align: center;color:#157fcc;padding:7px;font-weight:bold;">Revenue By Service Plan</div>',
                    '<div style="font-size:22px;color:white;cursor:pointer;margin-left: 370px;margin-top: -25px;" class="fa fa-cog">','</div>',
                    '<div style="padding:10px;height:280px;width:410px"  id="custombubblechart">','</div>',
                '</div>',

                {
                    compiled: true,
                    getValue: function (values) {
                        return Ext.htmlEncode(values.value);
                    },
                    getHeight: function () {
                        return me.up('custom-panel').getHeight();
                    }
                }
            )
        }
    });

``
Add the xtype whereever you want. This works like a charm.Similiary you can add whatever package and component you want to show on your interface.