0

我正在尝试将名为 Colorschemes ( https://nagix.github.io/chartjs-plugin-colorschemes/ ) 的 ChartJS 插件与 Salesforce 结合使用。ChartJS 插件按预期工作得很好，我可以绘制各种图表，我正在发送我在后端计算的数据，一帆风顺。

自定义 Salesforce 仪表板示例

当我尝试用插件中的调色板替换静态颜色时，问题就开始了。我得到一个像这样的灰色图表：

自定义 Salesforce 仪表板示例

我的第一直觉是用谷歌搜索这个，我发现了一篇文章（https://github.com/nagix/chartjs-plugin-colorschemes/issues/4），其中一个人通过添加解决了这个问题

import * as name from "chartjs-plugin-colorschemes";进入 Angular 项目，我无法在 Salesforce Aura 组件中轻松地重新创建此解决方案。

是否有任何 Salesforce 大师恰好也是 Angular 大师可以帮助我实现这一目标？

感谢您的任何帮助。

让我总结一下我必须节省您宝贵的时间。

  1. 我将 ChartJS.js 和 chartjs-plugin-colorschemes.js 都导入到静态资源中（我将后者命名为 ChartJSColors）。 静态资源
  2. 我将 ltng:require 标签添加到组件的视图中。这对于 ChartJS 库非常有效，因为在包含此标记后绘制图表没有问题。 看法
  3. 我在组件的 javascript Helper 部分中创建了图表，我根据此插件的文档指定了配色方案。
    drawWonChart: function (component, message, helper) {
        var temp = [];
        var action = component.get("c.getWonDataAPEX");
        action.setParams({ campaignType: message.getParam("campaignType"), startDate: message.getParam("startDate"), endDate: message.getParam("endDate")  });
        action.setCallback(this, function(response){
            if(response.getState() == 'SUCCESS'){
                temp = response.getReturnValue();
                helper.createWonChart(component, temp);
                if(message.getParam("campaignType")!=null && message.getParam("campaignType")!='All'){
                    component.set('v.chartHeading','Won by sub-type');
                } else {
                    component.set('v.chartHeading','Won by type');
                }
            }
        });
        $A.enqueueAction(action);
    },
    createWonChart : function(cmp, temp) {
        

        var dataMap = {"chartLabels": Object.keys(temp),
                       "chartData": Object.values(temp)
                       };
        
        var el = cmp.find('wonDoughnutChart').getElement();
        var ctx = el.getContext('2d');
        
        if (cmp.chartToSave) cmp.chartToSave.destroy();
        cmp.chartToSave = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: dataMap.chartLabels,
                datasets: [
                    {
                        label: "Won",
                        data: dataMap.chartData,
                        
                    }
                ]
            },
            options: {
                plugins:{
                    colorschemes:{
                        scheme: 'brewer.Paired12'
                    }
                }
            }
        });
    },
})```
4

0 回答 0