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);

ext整合highcharts实现饼图的更多相关文章

  1. Highcharts 3D柱形图;Highcharts 堆叠3D柱形图;Highcharts 3D饼图;Highcharts 3D圆环图

    Highcharts 3D柱形图 配置 chart.options3d 配置 以下列出了 3D 图的基本配置,设置 chart 的 type 属性为 column,options3d 选项可设置三维效 ...

  2. Highcharts Pie 饼图提示标签IE下重叠解决方法,及json数据绑定方法

    一.提示标签重叠解决方法: series: [{ startAngle:90,//添加这个属性,就可以解决 type: 'pie', name: '充值方式' }] 不知道为什么,上述方法不行了.第一 ...

  3. Highcharts之饼图

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. highcharts 柱形图 饼图 加URL或Click事件

    我们在做图表的时候,有时候需要在单个数据上加链接或点击事件,是在plotOptions里的events里设置的 plotOptions: { pie: { cursor: 'pointer', eve ...

  5. highcharts实例教程二:结合php与mysql生成饼图

    上回我们分析了用highcharts结合php和mysql生成折线图的实例,这次我们以技术cto网站搜索引擎流量为例利用highcharts生成饼图. 饼图通常用在我们需要直观地显示各个部分所占的比例 ...

  6. HighCharts之2D饼图

    HighCharts之2D饼图 1. HighCharts之2D饼图源码 <!DOCTYPE html> <html> <head> <meta charse ...

  7. 在.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图,柱状图,饼图

    开发背景: 今天在做一个关于商城后台金额报表统计的功能,为了让数据直观明了并且这个报表还需要在手机端自适应所以我决定采用HIghCharts插件下的的报表,大家也可以去了解一下免费开源主要是好看. 首 ...

  8. highCharts 饼图动态加载

    饼图的动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getContextPath( ...

  9. Highcharts 饼图 文字颜色设置

    设置饼图对应的提示文字的颜色与饼图块状一样,demo如下: $(function () { $('#container').highcharts({ chart: { plotBackgroundCo ...

随机推荐

  1. Python爬虫入门教程 38-100 教育部高校名单数据爬虫 scrapy

    爬前叨叨 今天要爬取一下正规大学名单,这些名单是教育部公布具有招生资格的高校名单,除了这些学校以外,其他招生的单位,其所招学生的学籍.发放的毕业证书国家均不予承认,也就是俗称的野鸡大学! 网址是 ht ...

  2. sun.misc jar包

    一直以来Base64算法的加密解密都是使用sun.misc包下的BASE64Encoder及BASE64Decoder来进行的.但是这个类是sun公司的内部方法,并没有在Java API中公开过,不属 ...

  3. 使用OSG创建一个简单的地形

    目录 1.解决方案 1) 使用TIF格式的DEM 2) 描述HeightField 2.存在问题 3.参考文档 1.解决方案 在网上参考了一些资料,使用OSG创建地形最简单的办法就是使用OSG::He ...

  4. scp传输提示bash: scp: command not found

    其中一端缺少scp相关的包源[oracle@rac1 dump_dir]$ scp /mnt/dump_dir/expdp_orders_2tabs2* 192.168.X.247:/home/ora ...

  5. CenOS_用户管理

    1.用户的创建 1.1基本创建 useradd <用户名> 如:useradd xm 默认在home目录下 为用户增加/修改密码: passwd <用户名> 如:passwd ...

  6. FPGA高速ADC接口实战——250MSPS采样率ADC9481

    一.前言 最近忙于硕士毕业设计和论文,没有太多时间编写博客,现总结下之前在某个项目中用到的一个高速ADC接口设计部分.ADC这一器件经常用于无线通信.传感.测试测量等领域.目前数字系统对高速数据采集的 ...

  7. ERROR 1129 (HY000): mysqladmin flush-hosts

    mysql报错:ERROR 1129 (HY000): Host * is blocked because of many connection errors; unblock with 'mysql ...

  8. 恢复oracle中误删除drop掉的表 闪回的方法

    恢复oracle中误删除drop掉的表   查看回收站中表 --需要在其所在用户下查询 回收站对象 select object_name,original_name,partition_name,ty ...

  9. 理解Linux文档的默认安全机制、隐藏属性、特殊权限,妈妈在也不用担心你从删库到跑路!!!

    写在前面 前面的章节 详解Linux文档属性.拥有者.群组.权限.差异,介绍了文档的基本权限,包括读写执行(r,w,x),还有文档若干的属性,包括是否为目录(d).文件(-).链接文件(l).拥有者. ...

  10. chrome谷歌开发者工具(hover时候的css样式怎么在浏览器调试)

    很多小伙伴在开发的时候,大多是在用谷歌开发者工具调试代码(快捷键F12 或 Ctrl-Shift-i). 可能会经常遇到需要调试hover样式的时候,一般都是直接改代码,然后在页面上刷新查看效果. 其 ...