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用于制作資料
1 public class PieChartController {
2 public Map<String,Integer> goodsBrandNumberMap = new Map<String,Integer>();
3 public Set<String> goodsBrand{get;set;}
4 public PieChartController() {
5 Map<String, object> goodsBrandValuesMap = PickListValuesUtil.getPicklistValues('Goods__c','GoodsBrand__c');
6 goodsBrand = goodsBrandValuesMap.keySet();
7 List<Goods__c> goodsList = [select Id,GoodsBrand__c from Goods__c where GoodsBrand__c <> null];
8 for(Goods__c currentGoods : goodsList) {
9 if(goodsBrand.contains(currentGoods.GoodsBrand__c)) {
10 if(goodsBrandNumberMap.keySet().contains(currentGoods.GoodsBrand__c)) {
11 goodsBrandNumberMap.put(currentGoods.GoodsBrand__c,goodsBrandNumberMap.get(currentGoods.GoodsBrand__c) + 1);
12 } else {
13 goodsBrandNumberMap.put(currentGoods.GoodsBrand__c,1);
14 }
15 }
16 }
17 }
18
19 public List<Data> getGoodsBrandPieData() {
20 List<Data> pieWdegeData = new List<Data>();
21 for(String goodsBrandName : goodsBrandNumberMap.keySet()) {
22 Data data = new Data(goodsBrandName + '\n' + goodsBrandNumberMap.get(goodsBrandName),goodsBrandNumberMap.get(goodsBrandName),goodsBrandName);
23 pieWdegeData.add(data);
24 }
25
26 return pieWdegeData;
27 }
28
29 // Wrapper class
30 public class Data {
31 //label
32 public String chartLabel { get; set; }
33 //the value of chart label
34 public Decimal valueOfChartLabel { get; set; }
35 //tip customize
36 public String tipOfChartLabel {get;set;}
37 //tip customize
38 public Decimal tipOfLabelValue{get;set;}
39
40 public Data(String chartLabel,Decimal valueOfChartLabel) {
41 this.chartLabel = chartLabel;
42 this.valueOfChartLabel = valueOfChartLabel;
43 }
44
45 //if the label of tip need to customize,choose this
46 public Data(String chartLabel,Decimal valueOfChartLabel,String tipOfChartLabel) {
47 this(chartLabel,valueOfChartLabel);
48 this.tipOfChartLabel = tipOfChartLabel;
49 }
50
51 //if both the label of tip and the value of tip need to customize ,choose this
52 public Data(String chartLabel,Decimal valueOfChartLabel,String tipOfChartLabel,Decimal tipOfLabelValue) {
53 this(chartLabel,valueOfChartLabel,tipOfChartLabel);
54 this.tipOfLabelValue = tipOfLabelValue;
55 }
56 }
57 } 由于展現的legend需要自己定義，是以我們在構造Data時要考慮圖表的label以及對應的value和label提示資訊以及相對應的value。Data相當于一個Property,前台通過資料綁定後在使用<apex:pieSeries>便相當于疊代器，将清單中每個Data元素取出。
2.Page頁面顯示資料
1 <apex:page controller="PieChartController" title="Pie Chart">
2
3 <apex:chart data="{!goodsBrandPieData}" height="400" width="500" colorSet="#0A224E,#BF381A,#A0D8F1,#E9AF32,#E07628">
4 <apex:legend position="bottom"/>
5 <apex:pieSeries labelField="chartLabel" dataField="valueOfChartLabel" donut="50">
6 <apex:chartLabel display="none" orientation="vertical" font="bold 18px Helvetica"/>
7 <apex:chartTips labelField="tipOfChartLabel"/>
8
9 </apex:pieSeries>
10 </apex:chart>
11
12 </apex:page> 通過上述代碼便可以實作上圖所示的chart。
我們把Page頁面做些調整，頁面代碼如下所示：
1 <apex:page controller="PieChartController" title="Pie Chart">
2
3 <apex:chart data="{!goodsBrandPieData}" height="400" width="500">
4 <apex:legend position="bottom"/>
5 <apex:pieSeries labelField="tipOfChartLabel" dataField="valueOfChartLabel" donut="50">
6 </apex:pieSeries>
7 </apex:chart>
8
9 </apex:page> 顯示效果如下圖所示
可以看出legend和label顯示樣式相同，如果需要進行相關的定制化，詳見PDF中所使用标簽的屬性。
總結：自定義圖表簡單的說便是先提供資料進行綁定，然後通過需要的圖表樣式進行解析即可，如果需要定制一些特殊需要，詳見使用的标簽屬性，legend标簽無value等自定義的值，其值與label綁定，是以如果需要legend顯示特殊的值，需要在設定Data時考慮相關的資訊，在label綁定時，綁定legend需要顯示的值，在對label進行自定義操作。如果篇中有錯誤地方歡迎指出，如果有問題歡迎留言。
作者：zero
部落格位址：http://www.cnblogs.com/zero-zyq/
本文歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接
個人下載下傳了一些相關學習的PDF檔案，如果需要下載下傳請通路百度雲 點選此處通路 密碼：jhuy
如果文章的内容對你有幫助，歡迎點贊~
為友善手機端檢視部落格，現正在将部落格遷移至微信公衆号：Salesforce零基礎學習，歡迎各位關注。