salesforce 零基础学习（二十六）自定义图表chart简单介绍（使用apex和VF实现）

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 + '
' + 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进行自定义操作。如果篇中有错误地方欢迎指出，如果有问题欢迎留言。