Salesforce Lightning组件中使用Chart.JS实现数据可视化

Posted 2021-03-01 鲁清华

之前尝试过Google Chart来实现数据可视化（可以查看我之前的博客Google Chart 之 Area Chart案例），但是很遗憾，Google Chart是无法集成到Salesforce Lightning中的，理由嘛，Google javascript会跟Google通信，而且具有脚本的外部引用，但是Sales force的安全策略是不允许这样做的，据我所知，到目前为止是没有解决方法的，所以我们来学习下Chart.JS，这个开源的第三方JS库提供了交互式可视化组件，关键是，它是可以在Sales force Lightning组件中使用的

下载Chart.JS，导入到Salesforce静态资源

 接下来我们创建一个Lighntning的组件：ChartDemo

<aura:component controller="GraphController" 
                implements="flexipage:availableForAllPageTypes" 
                access="global">
    <ltng:require scripts="{!$Resource.ChartJS23}" afterScriptsLoaded="{!c.ctr}"/>
    <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--3-of-4">
        <canvas aura:id="lineChart" id="lineChart"/>
    </div>
</aura:component>

其对应的JS Controller如下：

({
    ctr : function(cmp, event, helper) {
        var temp = [];
        var action = cmp.get("c.getLineChartMap");  
        action.setCallback(this, function(response){                        
            if(response.getState() === \'SUCCESS\' && response.getReturnValue()){
                temp = JSON.parse(response.getReturnValue());
                helper.createLineGraph(cmp, temp);
            }            
        });  
       $A.enqueueAction(action);
    }
})

其对应的Helper Controller如下：

({
    createLineGraph : function(cmp, temp) {
        var label = [];
        var firstValue = [];
        var secondValue = [];
        for(var a=0; a< temp.length; a++){
            console.debug(temp[a]["label"]);
            label.push(temp[a]["label"]);
            firstValue.push(temp[a]["firstValue"]);
            secondValue.push(temp[a]["secondValue"]);                     
        }    
        var el = cmp.find(\'lineChart\').getElement();
        var ctx = el.getContext(\'2d\');
        
        new Chart(ctx, {
            type: \'line\',
            data: {
                labels: label,
                datasets: [{
                    label: \'USD Sent\',
                    data: firstValue,
                    backgroundColor: "rgba(153,255,51,0.4)"
                }, {
                    label: \'USD Recieved\',
                    data: secondValue,
                    backgroundColor: "rgba(255,153,0,0.4)"
                }]
            }
        });
        
    }
})

最后是对应的Apex Controller：GraphController源码，我使用Map模拟了后台查询数据的部分，方便演示效果

public class GraphController {
    
    @auraEnabled
    public List<LineChartVar> myLineChartVarList;
    
    public class LineChartVar {
        string label;
        integer firstValue;
        integer secondValue;       
        
        public LineChartVar(string a, integer b, integer c){
            label = a;
            firstValue = b;
            secondValue = c;
        } 
    }
    @auraEnabled
    public static string getLineChartMap(){
        List<LineChartVar> myLineChartVarList = new List<LineChartVar>();
        myLineChartVarList.add(new LineChartVar(\'2014\', 100, 120));
        myLineChartVarList.add(new LineChartVar(\'2015\', 150, 190));
        myLineChartVarList.add(new LineChartVar(\'2016\', 170, 200));
        myLineChartVarList.add(new LineChartVar(\'2017\', 260, 210));
        myLineChartVarList.add(new LineChartVar(\'2018\', 110, 300));
        myLineChartVarList.add(new LineChartVar(\'2019\', 370, 150));
        myLineChartVarList.add(new LineChartVar(\'2020\', 450, 500));        
        return JSON.Serialize(myLineChartVarList);
    }
}

 最后为了查看这个Lightning组件的，我创建了一个测试有的Application,将这个组件嵌入其中，源码如下：

<aura:application >
    <c:ChartDemo/>
</aura:application>

点击Review来查看在这个Application的效果

 可以看到，这样生成的一张表的效果究其本质是通过JS画了一个图片出来，那么你会发现，这个图片铺满了整个页面还似乎没法显示完全，那么该如何控制这个图的各种元素的显示呢？通过查看Chart.js的文档，简单的对这个图表的元素显示做一个演练

仔细阅读上面的源码，你会发现对图标的渲染主要发生在Helper Controller中，那么同样，对图标元素显示效果的渲染也主要是在Helper Controller中进行

new Chart(ctx, {
    type: \'line\',
    data: {
        labels: label,
        datasets: [{
            label: \'USD Sent\',
            data: firstValue,
            backgroundColor: "rgba(153,255,51,0.4)",// 填充的颜色
            pointRadius:5,
            pointStyle:\'circle\',
            borderColor:\'#bbd9b7\',// 折线的颜色设置
            pointBorderColor:\'#00ff00\', // 顶点圈圈的颜色
            pointBackgroundColor:\'#00ff00\' // 顶点的颜色
        }, {
            label: \'USD Recieved\',
            data: secondValue,
            backgroundColor: "rgba(255,153,0,0.4)",// 填充的颜色
            pointRadius:5,
            pointStyle:\'circle\',
            borderColor:\'#bbd9b7\',// 折线的颜色设置
            pointBorderColor:\'#ff0000\', // 顶点圈圈的颜色
            pointBackgroundColor:\'#ff0000\' // 顶点的颜色
        }]
    },
    options: {
        elements: {
            line: {tension: 0} // 设置折线图
        },
        legend: {display: false}, // 设置不显示图例
        responsive: false, // responsive和maintainAspectRatio设置为false才可以调整图标的宽高
        maintainAspectRatio: false,
        scales: {
            xAxes: [{
                gridLines: {display:false} // 隐藏网格线
            }],
            yAxes: [{
                gridLines: {display:false},
                display: false // 隐藏Y轴
            }]
        },
        // 设置显示数据的顶点
        hover:{animationDuration:0},//防止鼠标移动到顶点时的闪烁效果
        animation:{
            "duration":1, // //防止鼠标移动到顶点时的闪烁效果
            "onComplete": function() {
                var chartInstance = this.chart,
                  ctx = chartInstance.ctx;
                ctx.fillStyle = \'grey\';
                ctx.textAlign = \'center\';
                ctx.textBaseline = \'bottom\';
                this.data.datasets.forEach(function(dataset, i) {
                  var meta = chartInstance.controller.getDatasetMeta(i);
                    meta.data.forEach(function(bar, index) {
                        var data = \'$\' + dataset.data[index];
                        // data:顶点显示的数据，bar._model.x -10：X轴偏移量；bar._model.y：Y轴偏移量
                        ctx.fillText(data, bar._model.x -10, bar._model.y);
                    });
                });
          }
       }
    }
});

如果部署了上面的JS，预览的组件效果则会是下面的效果，看着非常袖珍的一张图

 

 那么该如何设置这个图的宽高呢？在Helper中可以直接进行渲染

// 方式一：在Helper中直接渲染
var el = cmp.find(\'lineChart\').getElement();
var ctx = el.getContext(\'2d\');
ctx.canvas.width = \'700\';
ctx.canvas.height = \'300\';

// 方式二：在cmp中，直接设定宽高
<canvas aura:id="lineChart" id="lineChart" width="600" height="300"/>

Tips: 注意设置Chart的宽高需要将 responsive 和 maintainAspectRatio 设置为False.

这样渲染出来的图片效果就会合适很多

 

以上是对Chart.JS该如何应用到Salesforce Lightning中的一个简单演示，如有错漏可以留言交流