ext整合highcharts实现饼图

extjs自身有图表的功能，但是与highcharts和echarts相比，ext不如它们功能强大、样式美观。

公司项目的前端框架使用的是ext，所以就有了ext整合第三方图表插件的需求。

笔者会一点ext，会一点highcharts，但是把两个整合起来对我有难度，好在公司大佬Groot写了一个整合的样板可以参考，我对源代码进行了一部分修改放到博客上，方便我以后的回顾以及供大家参考。

效果图：

公司的项目中有多个地方会用到饼图，因此大佬把生成饼图抽成了一个js脚本rendererHelper.js，大大方便了公司其他开发人员的调用，这一点很值得学习。

以下是生成这个饼图的方法的源代码：

// Ext.Loader.setConfig({enabled: true}); 可开启Ext.Loader
// 此方法中用到了第三方插件，要加载它，就必须开启Ext.Loader
Ext.Loader.setConfig({ enabled: true });
// 定义命名空间
Ext.Loader.setPath('Chart.ux', 'highcharts插件所在的文件夹');
// 引用类
Ext.require([
    'Chart.ux.Highcharts',
    'Chart.ux.Highcharts.Serie',
    'Chart.ux.Highcharts.PieSerie'
]);

function createPie(store, colors) {
    var pieChart = Ext.create('Chart.ux.Highcharts', {
        height: 320,
        series: [
            {
                type: 'pie',
                dataField: 'num',
                categorieField: 'typeName',
                name: '数量'
            }
        ],
        store: store,
        chartConfig: {
            chart: { type: 'pie' },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: "pointer",
                    colors: colors,
                    donut: false,
                    tooltip: {
                    },
                    showInLegend: true,
                    dataLabels: {
                        formatter: function () {
                            return Highcharts.numberFormat(this.percentage, 2) + '%';
                        }
                    }
                }
            },
            credits: false,
            title: {
                text: null,
                align: 'left'
            }
        }
    });
    return pieChart;
}

 使用这个脚本的方法：

1、在对应页面的jsp页面引入rendererHelper.js

<script src="rendererHelper.js""></script>

 

 2、在对应页面的js文件中调用脚本中的createPie方法：

// store是数据存储，colors是饼图颜色
var typePie = createPie(store, colors);