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 + '\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進行自定義操作。如果篇中有錯誤地方歡迎指出，如果有問題歡迎留言。