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);
ext整合highcharts实现饼图的更多相关文章
- Highcharts 3D柱形图;Highcharts 堆叠3D柱形图;Highcharts 3D饼图;Highcharts 3D圆环图
Highcharts 3D柱形图 配置 chart.options3d 配置 以下列出了 3D 图的基本配置,设置 chart 的 type 属性为 column,options3d 选项可设置三维效 ...
- Highcharts Pie 饼图提示标签IE下重叠解决方法,及json数据绑定方法
一.提示标签重叠解决方法: series: [{ startAngle:90,//添加这个属性,就可以解决 type: 'pie', name: '充值方式' }] 不知道为什么,上述方法不行了.第一 ...
- Highcharts之饼图
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- highcharts 柱形图 饼图 加URL或Click事件
我们在做图表的时候,有时候需要在单个数据上加链接或点击事件,是在plotOptions里的events里设置的 plotOptions: { pie: { cursor: 'pointer', eve ...
- highcharts实例教程二:结合php与mysql生成饼图
上回我们分析了用highcharts结合php和mysql生成折线图的实例,这次我们以技术cto网站搜索引擎流量为例利用highcharts生成饼图. 饼图通常用在我们需要直观地显示各个部分所占的比例 ...
- HighCharts之2D饼图
HighCharts之2D饼图 1. HighCharts之2D饼图源码 <!DOCTYPE html> <html> <head> <meta charse ...
- 在.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图,柱状图,饼图
开发背景: 今天在做一个关于商城后台金额报表统计的功能,为了让数据直观明了并且这个报表还需要在手机端自适应所以我决定采用HIghCharts插件下的的报表,大家也可以去了解一下免费开源主要是好看. 首 ...
- highCharts 饼图动态加载
饼图的动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getContextPath( ...
- Highcharts 饼图 文字颜色设置
设置饼图对应的提示文字的颜色与饼图块状一样,demo如下: $(function () { $('#container').highcharts({ chart: { plotBackgroundCo ...
随机推荐
- jbpm - 工作流的基本操作
Jbpm流程引擎. 定义:jbpm,全称是Java Business Process Management(业务流程管理),他是覆盖了业务流程管理,工作流管理,服务协作等领域的一个开源的,灵活的,易扩 ...
- Linux安装kubernetes
使用KUBEADM安装KUBERNETES V1.14.0 一.环境准备 操作系统:Centos 7.5 一台或多台运⾏行行着下列列系统的机器器: Ubuntu 16.04+ ...
- 同一容器中a标签比较多的情况下通过title属性值隐藏
同一容器中a标签比较多的情况下如何通过title属性值控制a标签的隐藏或显示 最近项目中遇到一个IE兼容性问题,网站需要在底部footer添加"站长统计"代码,容器中动态添加很多a ...
- iOS 好文源码收藏
bireme 大佬的 iOS 保持界面流畅的技巧 https://blog.ibireme.com/2015/11/12/smooth_user_interfaces_for_ios/ 深入理解Run ...
- 排错-升级Exchange 2013 CU22后程序名称显示异常
近期在按需更新Exchange 2013 CU22补丁以便解决Microsoft Exchange Server ADV190007 Guidance for "PrivExchange&q ...
- equals方法和==的区别--用实例简单说明
首先我们创建一个类 public class People { private String name; private String address; public String getName() ...
- The Network Adapter could not establish the connection
启动即可
- 新更新kb4493472导致无法正常开机
昨天陆续接到电话,说是系统更新后电脑不能正常使用,症状基本是开机到欢迎界面就出现各种各样的状况,比如鼠标能动,其他无反应;欢迎界面结束后黑屏,只有鼠标能动:开机后正常,但电脑使用很卡等等状况.因为昨天 ...
- 腾讯云服务器搭建Apache/PHP/MySQL环境
软件环境 Windows Server 2008 R2 企业版 SP1 64位 刚刚进入 Windows Server ,你会看到以下界面: 列出了服务器的基础信息和常用配置 下载 XAMPP htt ...
- 【深度学习篇】--Seq2Seq模型从初识到应用
一.前述 架构: 问题: 1.压缩会损失信息 2.长度会影响准确率 解决办法: Attention机制:聚焦模式 “高分辨率”聚焦在图片的某个特定区域并以“低分辨率”,感知图像的周边区域的模式.通过大 ...