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

之前尝试过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中的一个简单演示,如有错漏可以留言交流

原文地址:https://www.cnblogs.com/luqinghua/p/12663701.html

时间: 2024-10-28 09:45:08

Salesforce Lightning组件中使用Chart.JS实现数据可视化的相关文章

使用ASP.NET中的Chart.js在ASP.NETVisual数据中使用Chart.js的可视化数据

Download Chart.js你可以Chart.js从这封信中:https://github.com/chartjs/Chart.js/releases 使用VisualStudio创建新的ASP.NET项目并复制Chart.js在上一步中下载到root项目. 创建一个名为"Home.aspx"并添加如下代码行: 藏   复制码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehi

angulajs中引用chart.js做报表,修改线条样式

目前还有个问题,在手机上看,当折线y轴值超过1000,会有点问题 1.下载chart js,可以用bower 命令下载 http://www.chartjs.org/docs/#line-chart-example-usage 2.html页面代码 <canvas id="leaderline" class="chart chart-line" data="data" labels="labels" legend=&qu

salesforce lightning零基础学习(七) 列表展示数据时两种自定义编辑页面

上一篇Lightning内容描述的是LDS,通过LDS可以很方便的实例化一个对象的数据信息.当我们通过列表展示数据需要编辑时,我们常使用两种方式去处理编辑页面:Pop Up Window弹出修改详情以及在本页面隐藏详情页面显示编辑页面. 实现这个功能以前主要需要先了解几个标签: lightning:recordForm: 此标签允许用户快速的创建一个form去查看,添加以及修改一条记录.集合了 lightning:recordEditForm 以及 lightning:recordViewFor

Chart.js在Laravel项目中的应用

本文为转载,原文:Chart.js在Laravel项目中的应用 介绍 Chart.js是一个HTML5图表库,使用canvas元素来展示各式各样的客户端图表,支持折线图.柱形图.雷达图.饼图.环形图等, 本文将介绍如何在laravel项目中使用chart.js 安装 可以通过以下命令在 npm 或 bower 中来安装chart.js. npm install chart.js --save bower install chart.js --save 可以在你的项目中使用 CDN link. h

Lightning框架示例 - 动态建立Lightning组件

动态建立Lightning组件 组件化前端开发是Lightning框架的优点之一.在进行Lightning应用开发时,我们可以将组件进行嵌套.引用,从而实现模块的封装和重用,提高开发效率. 组件的嵌套和引用最常用的方法是在Lightning组件中直接使用组件标签,比如: <aura:component controller="ExampleController"> <c:ExampleChildComponent /> </aura:component&g

使用Vue.js 和Chart.js制作绚丽多彩的图表

前言 深入学习 chart.js 的选项来制作漂亮的图表.交互式图表可以给你的数据可视化提供很酷的展示方式.但是大多数开箱即用的解决方案用默认的选项并不能做出很绚丽的图表. 这篇文章中,我会教你如何自定义 chart.js 选项来制作很酷的图表. ? Quick Start 我们需要: Vue.js vue-chart.js vue-cli 使用 vue-cli 来搭基本架构,希望你已经安装好了.我们使用 vue-chart.js 来作为 chart.js 的打包器. vue init webp

Html5之高级-7 HTML5 Chart.js(概述、入门、使用)

一.Chart.js 概述 Chart.js 简介 - Chart.js 是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库 - 官方地址: http://www.chartjs.org/ Chart.js 特点 - 基于 HTML 5 - Chart.js 基于 HTML5 canvas技术,支持所有现代浏览器,并且针对IE7/8提供了降级替代方案 - 简单.灵活 - Chart.js 不依赖任何外部工具库,轻量级(压缩之后仅有4.5k),并且提供了加载外部参数的方法 Chart.js

chart.js使用常见问题

Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 在使用过程中新手可能会遇到很多问题导致图标无法显示.下面我们来看一下在使用过程中可能会遇到的问题. 刚开始用chart.js的新手可能最先使用的就是chart.js的中文文档,根据中文文档所写的操作步骤完成操作. 首先,下载chart.js文件,通常我们从github下载. 初次使用,我们通常会直接点击图片右下角的clone or download直接下载zip文件,然后在解压后的文件中找到chart.js文件,之后引

chart.js轻量级图表插件使用

安装下载 下载地址:https://github.com/chartjs/Chart.js/releases/latest cdn LINK:https://cdnjs.com/libraries/Chart.js 文档:http://chartjs.cn/docs/ Chart.js有两种不同的版本.常规版本的Chart.js和 Chart.min.js,附带chart.js库的同时还带着颜色解析器.如果你想使用这个版本并且在你的图表中使用时间轴,你需要在安装Chart.js之前安装上Mome