用 Chart.js 进行图表设计

#1.最终实现效果图
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332907/78d3a3a1-b053-0d32-9b9b-461e251d966a.png)
#2.实现方式（Aura Component）
##2-0：Apex 代码实装
```java:ChartData.cls
public class ChartData {
	@AuraEnabled
	public List<String> labels {get;set;}
	@AuraEnabled
	public List<DataSet> datasets {get;set;}
	public ChartData(){
		this.labels = new List<String>();
		this.datasets = new List<DataSet>();
	}
	public class DataSet{
		@AuraEnabled
		public String label {get;set;}
		@AuraEnabled
		public List<String> data {get;set;}
		public DataSet(){
			this.label = '' ; 
			this.data = new List<String>();
		}
	}
}
```
```java:CaseStatusChartController.cls
public class CaseStatusChartController {
	@AuraEnabled
	public static ChartData getAllCaseByStatus(){
		ChartData jsChartData = new ChartData();
		ChartData.DataSet jsDataSet = new ChartData.DataSet();
		jsDataSet.label = '';
		jsChartData.datasets.add(jsDataSet);
		List<AggregateResult> result = [Select Count(Id) cnt, Status from Case group by Status];
		for(AggregateResult ar:result){
			String status =  (String)ar.get('Status') ;
			String total = String.valueOf(ar.get('cnt'));
			jsChartData.labels.add(status);
			jsDataSet.data.add(total);
		}
		return jsChartData; 
	}
}
```
##2-1：柱状图（bar-chart）
```html:barChartCmp.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" controller="CaseStatusChartController">
    <ltng:require scripts="{!$Resource.ChartJSAsset + '/Chart.min.js'}"
                  afterScriptsLoaded="{!c.scriptsLoaded}" />
    <!-- 柱状图 -->
    <div>
        <div class="slds-box slds-theme_default">
            <div class="chart-container" >
                <canvas id="bar-chart"></canvas>
            </div>
        </div>
    </div>
 </aura:component>
```
```javascript:barChartCmpController.js
({
    scriptsLoaded : function(component, event, helper) {
        var action = component.get("c.getAllCaseByStatus");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                let returnValue = response.getReturnValue();
                // 柱状图
                new Chart(document.getElementById("bar-chart"), {
                    type: 'bar',
                    data: {
                        labels:returnValue.labels,
                        datasets: [{
                            label: "Count of Case",
                            data: returnValue.datasets[0].data,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1,
                        }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                });
            }
        });
        $A.enqueueAction(action);
    }
})
```
##2-2：曲线图（line-chart）
```html:lineChartCmp.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" controller="CaseStatusChartController">
    <ltng:require scripts="{!$Resource.ChartJSAsset + '/Chart.min.js'}"
                  afterScriptsLoaded="{!c.scriptsLoaded}" />
    <!-- 曲线图 -->
    <div>
        <div class="slds-box slds-theme_default">
            <div class="chart-container" >
                <canvas id="line-chart"></canvas>
            </div>
        </div>
    </div>
 </aura:component>
```
```javascript:lineChartCmpController.js
({
    scriptsLoaded : function(component, event, helper) {
        var action = component.get("c.getAllCaseByStatus");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                let returnValue = response.getReturnValue();
                // 曲线图
                new Chart(document.getElementById("line-chart"), {
                    type: 'line',
                    data: {
                        labels:returnValue.labels,
                        datasets: [{
                            label: "Count of Case",
                            data: returnValue.datasets[0].data,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1,
                            fill: false,
                        }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                });
            }
        });
        $A.enqueueAction(action);
    }
})
```
##2-3：饼状图（pie-chart）
```html:pieChartCmp.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" controller="CaseStatusChartController">
    <ltng:require scripts="{!$Resource.ChartJSAsset + '/Chart.min.js'}"
                  afterScriptsLoaded="{!c.scriptsLoaded}" />
    <!-- 饼状图 -->
    <div>
        <div class="slds-box slds-theme_default">
            <div class="chart-container" >
                <canvas id="pie-chart"></canvas>
            </div>
        </div>
    </div>
 </aura:component>
```
```javascript:pieChartCmpController.js
({
    scriptsLoaded : function(component, event, helper) {
        var action = component.get("c.getAllCaseByStatus");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                let returnValue = response.getReturnValue();
                // 饼状图
                new Chart(document.getElementById("pie-chart"), {
                    type: 'pie',
                    data: {
                        labels:returnValue.labels,
                        datasets: [{
                            label: "Count of Case",
                            data: returnValue.datasets[0].data,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        title: {
                            display: true,
                            text: 'Total Case by Status'
                        }
                    }
                });
            }
        });
        $A.enqueueAction(action);
    }
})
```
##2-4：甜甜圈（doughnut-chart）
```html:doughnutChartCmp.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" controller="CaseStatusChartController">
    <ltng:require scripts="{!$Resource.ChartJSAsset + '/Chart.min.js'}"
                  afterScriptsLoaded="{!c.scriptsLoaded}" />
    <!-- 甜甜圈 -->
    <div>
        <div class="slds-box slds-theme_default">
            <div class="chart-container" >
                <canvas id="doughnut-chart"></canvas>
            </div>
        </div>
    </div>
 </aura:component>
```
```javascript:doughnutChartCmpController.js
({
    scriptsLoaded : function(component, event, helper) {
        var action = component.get("c.getAllCaseByStatus");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                let returnValue = response.getReturnValue();             
                // 甜甜圈
                new Chart(document.getElementById("doughnut-chart"), {
                    type: 'doughnut',
                    data: {
                        labels:returnValue.labels,
                        datasets: [{
                            label: "Count of case",
                            data: returnValue.datasets[0].data,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        title: {
                            display: true,
                            text: 'Total case by Status'
                        }
                    }
                });
            }
        });
        $A.enqueueAction(action);
    }
})
```

#3.Resource
https://www.chartjs.org/
https://how2j.cn/k/chartjs/chartjs-intro/2056.html