chart在报表中经常使用到,他可以使报表结果更加直观的展现给用户。salesforce支持VF和apex代码来更好的展示chart。

chart分类:常用的图表样式有饼状图,柱状图,折线图,条形图,表盘图,雷达图,及线性系列图表等。

图表根据样式不同显示的内容不同,大概包含以下部分:

1. X,Y坐标;

2. 标题;

3. 内容及所含数量(data);

4.移入上面显示的相关提示信息(tip);

5.说明(legend)。

注:这里只是总结大概的部分,显示的部分因图表样式而有相应的差距,chart是可以高度自定义的,可以通过vf标签的属性对内容进行显示或者隐藏。

这里主要对饼状图进行描述,其他图形可以参看Page Developer的描述以及相关标签的属性介绍来自行练习。我们要实现的大概效果如下图所示。

还是以Goods__c表为例,其中一个字段为GoodsBrand__c,类型为PickList,主要有四种可选择产品类型,华为,小米,魅族以及联想。我们要做的chart为展示数据表中各个品牌所占的比例。

对此饼状图大概分析:制作此饼状图需要有数据,说明(legend),提示信息(tip)。

其中,我们使用<apex:chart>标签来封装数据,使用<apex:pieSeries>来显示数据。<apex:pieSeries>有这样两个属性,labelField展示图表上面显示的内容信息,此信息与legend的标题信息相同且legend不可以自己定义,dataField用来展示比例,即这个值占据总量的多少。默认情况下tip信息由key,value队组成,显示的key为labelField值,显示的value为dataField的值。

制作步骤:

1.Apex用于制作数据

 public class PieChartController {
public Map<String,Integer> goodsBrandNumberMap = new Map<String,Integer>();
public Set<String> goodsBrand{get;set;}
public PieChartController() {
Map<String, object> goodsBrandValuesMap = PickListValuesUtil.getPicklistValues('Goods__c','GoodsBrand__c');
goodsBrand = goodsBrandValuesMap.keySet();
List<Goods__c> goodsList = [select Id,GoodsBrand__c from Goods__c where GoodsBrand__c <> null];
for(Goods__c currentGoods : goodsList) {
if(goodsBrand.contains(currentGoods.GoodsBrand__c)) {
if(goodsBrandNumberMap.keySet().contains(currentGoods.GoodsBrand__c)) {
goodsBrandNumberMap.put(currentGoods.GoodsBrand__c,goodsBrandNumberMap.get(currentGoods.GoodsBrand__c) + 1);
} else {
goodsBrandNumberMap.put(currentGoods.GoodsBrand__c,1);
}
}
}
} public List<Data> getGoodsBrandPieData() {
List<Data> pieWdegeData = new List<Data>();
for(String goodsBrandName : goodsBrandNumberMap.keySet()) {
Data data = new Data(goodsBrandName + '\n' + goodsBrandNumberMap.get(goodsBrandName),goodsBrandNumberMap.get(goodsBrandName),goodsBrandName);
pieWdegeData.add(data);
} return pieWdegeData;
} // Wrapper class
public class Data {
//label
public String chartLabel { get; set; }
//the value of chart label
public Decimal valueOfChartLabel { get; set; }
//tip customize
public String tipOfChartLabel {get;set;}
//tip customize
public Decimal tipOfLabelValue{get;set;} public Data(String chartLabel,Decimal valueOfChartLabel) {
this.chartLabel = chartLabel;
this.valueOfChartLabel = valueOfChartLabel;
} //if the label of tip need to customize,choose this
public Data(String chartLabel,Decimal valueOfChartLabel,String tipOfChartLabel) {
this(chartLabel,valueOfChartLabel);
this.tipOfChartLabel = tipOfChartLabel;
} //if both the label of tip and the value of tip need to customize ,choose this
public Data(String chartLabel,Decimal valueOfChartLabel,String tipOfChartLabel,Decimal tipOfLabelValue) {
this(chartLabel,valueOfChartLabel,tipOfChartLabel);
this.tipOfLabelValue = tipOfLabelValue;
}
}
}

由于展现的legend需要自己定义,所以我们在构造Data时要考虑图表的label以及对应的value和label提示信息以及相对应的value。Data相当于一个Property,前台通过数据绑定后在使用<apex:pieSeries>便相当于迭代器,将列表中每个Data元素取出。

2.Page页面显示数据

 <apex:page controller="PieChartController" title="Pie Chart"> 

     <apex:chart data="{!goodsBrandPieData}" height="400" width="500" colorSet="#0A224E,#BF381A,#A0D8F1,#E9AF32,#E07628">
<apex:legend position="bottom"/>
<apex:pieSeries labelField="chartLabel" dataField="valueOfChartLabel" donut="50">
<apex:chartLabel display="none" orientation="vertical" font="bold 18px Helvetica"/>
<apex:chartTips labelField="tipOfChartLabel"/> </apex:pieSeries>
</apex:chart> </apex:page>

通过上述代码便可以实现上图所示的chart。

我们把Page页面做些调整,页面代码如下所示:

 <apex:page controller="PieChartController" title="Pie Chart"> 

     <apex:chart data="{!goodsBrandPieData}" height="400" width="500">
<apex:legend position="bottom"/>
<apex:pieSeries labelField="tipOfChartLabel" dataField="valueOfChartLabel" donut="50">
</apex:pieSeries>
</apex:chart> </apex:page>

显示效果如下图所示

可以看出legend和label显示样式相同,如果需要进行相关的定制化,详见PDF中所使用标签的属性。

总结:自定义图表简单的说便是先提供数据进行绑定,然后通过需要的图表样式进行解析即可,如果需要定制一些特殊需要,详见使用的标签属性,legend标签无value等自定义的值,其值与label绑定,所以如果需要legend显示特殊的值,需要在设置Data时考虑相关的信息,在label绑定时,绑定legend需要显示的值,在对label进行自定义操作。如果篇中有错误地方欢迎指出,如果有问题欢迎留言。

salesforce 零基础学习(二十六)自定义图表chart简单介绍(使用apex和VF实现)的更多相关文章

  1. salesforce 零基础学习(十六)Validation Rules & Date/time

    上一篇介绍的内容为Formula,其中的Date/time部分未指出,此篇主要介绍Date/time部分以及Validation rules. 本篇参考PDF: Date/time:https://r ...

  2. salesforce零基础学习(九十六)Platform Event浅谈

    本篇参考:https://developer.salesforce.com/blogs/2018/07/which-streaming-event-do-i-use.html https://trai ...

  3. salesforce零基础学习(九十六)项目中的零碎知识点小总结(四)

    本篇参考: https://developer.salesforce.com/docs/atlas.en-us.216.0.apexcode.meta/apexcode/apex_classes_ke ...

  4. salesforce 零基础学习(十八)WorkFlow介绍及用法

    说起workflow大家肯定都不陌生,这里简单介绍一下salesforce中什么情况下使用workflow. 当你分配许多任务,定期发送电子邮件,记录修改时,可以通过自动配置workflow来完成以上 ...

  5. salesforce 零基础学习(十九)Permission sets 讲解及设置

    Permission sets以及Profile是常见的设置访问权限的方式. Profile规则为'who see what'.通过Profile可以将一类的用户设置相同的访问权限.对于有着相同Pro ...

  6. salesforce lightning零基础学习(四) 事件(component events)简单介绍

    lightning component基于事件驱动模型来处理用户界面的交互.这种事件驱动模型和js的事件驱动模型也很相似,可以简单的理解成四部分: 1.事件源:产生事件的地方,可以是页面中的输入框,按 ...

  7. salesforce零基础学习(一百零五)Change Data Capture

    本篇参考: https://developer.salesforce.com/docs/atlas.en-us.232.0.api_streaming.meta/api_streaming/using ...

  8. salesforce零基础学习(八十二)审批邮件获取最终审批人和审批意见

    项目中,审批操作无处不在.配置审批流时,我们有时候会用到queue,related user设置当前步骤的审批人,审批人可以一个或者多个.当审批人有多个时,邮件中获取当前记录的审批人和审批意见就不能随 ...

  9. salesforce 零基础学习(五十二)Trigger使用篇(二)

    第十七篇的Trigger用法为通过Handler方式实现Trigger的封装,此种好处是一个Handler对应一个sObject,使本该在Trigger中写的代码分到Handler中,代码更加清晰. ...

随机推荐

  1. Mysql 变量使用

    mysql 中可以将所查询到的数据用变量存储下来,供后面使用 语法:SELECT @变量名 := 变量值 eg: SELECT @cid:=class_id, (SELECT class_name F ...

  2. set命令

    set命令简介 set命令是shell中初学者比较少接触,但是却很有用的一个命令(这里我们说的shell指的是bash).set命令是shell解释器的一个内置命令,用来设置shell解释器的属性,从 ...

  3. JS-JQuery(JSONP)调用WebService跨域若干技术点

    1.JSONP:JSON With Padding,让网页从别的网域获取信息,也就是跨域获取信息,可以当做是一种“工具”,大多数架构Jquery.EXTjs等都支持. 由于同源策略,一般来说位于 se ...

  4. jboss developers studio 快速创建 spring mvc 项目

    1. 2. 部署运行 还有一个 rest very good !! ps:其实就是 一个 jboss 的 spring mvc maven 原型

  5. boost的编译

    第1步: 先从官网(www.boost.org)下载最新版的BOOST源码,如图所示 我这里下的是zip的那个第2步:编译源代码(放心.这里是傻瓜式的操作,很容易操作)(1)先把源代码放在E盘,例如 ...

  6. 每天记一些php函数,jQuery函数和linux命令(一)

    简介:学习完了php和jQuery之后,对函数的记忆不到位,导致很多函数没记住,所以为了促进自己的记忆,每天花一点时间来写这个博客. 时间:2016-12-18    地点:太原    天气:晴 一. ...

  7. C#学习感悟

    上周虽然没上课,课上的内容是部分同学展示大作业成果,但是对于我来说,看了一些同学辛勤劳动的成果,听了他们对C#学习的一些感悟,我受益匪浅. 在这里我想谈谈我的收获.老师给的模板是todolist,但是 ...

  8. mysql 基本操作语句

    mysql 基本操作笔记: 创建表demo:CREATE TABLE `role` ( `role_id` int(10) unsigned NOT NULL AUTO_INCREMENT COMME ...

  9. 0002--Weekly Meeting on 27th March and 3th April, 2015

    27th March, 2015 (1) RankNet && PageRank ->reporter: jinquan Du   Web_RankNet  Web_PageRa ...

  10. jquery 获取 scrollHeight

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:匿名用户链接:http://www.zhihu.com/question/20985674/answer/16807177来源 ...