Question

我一直在使用DC和Crossfilter在sharepoint中构建报告页面。

现在在我的页面上，我有5个饼图可以正常显示。但是，当我尝试向页面添加DC数据表以显示图表的结果时，在过滤结果时，在“ resultsChart.render（）;”上出现了javascript错误。

因为在渲染每个饼图时没有给出错误，所以我认为这意味着数据表对象有问题，或者我无法在该对象上调用render（）（无论它认为是什么）。

以下是我的代码的相关部分：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js" type="text/javascript">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js" type="text/javascript">          
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.6/dc.min.js" type="text/javascript">   

//connect to sharepoint site (change this URL to redirect)

var siteUrl = 'path';
var masterData = [];

//retrieve list data from above sharepoint site based on List Name
                function retrieveListItems() {

                    var clientContext = new SP.ClientContext(siteUrl);
                    var oList = clientContext.get_web().get_lists().getByTitle('Upcoming');
                    var camlQuery = new SP.CamlQuery();                    
                    camlQuery.set_viewXml("<View><Query></Query></View>");   

                    this.collListItem = oList.getItems(camlQuery);
                    clientContext.load(collListItem);
                    clientContext.executeQueryAsync(
                        Function.createDelegate(this, this.onQuerySucceeded), 
                        Function.createDelegate(this, this.onQueryFailed)
                        );

                    }
                //on query success      

                function onQuerySucceeded(sender, args) {

                    var listItemEnumerator = collListItem.getEnumerator();

                    while (listItemEnumerator.moveNext()) { 

                        var data = {};
                        var oListItem = listItemEnumerator.get_current();

                        //set field keys on array objects

                        data.project = oListItem.get_item('Project_x0020_Type');
                        data.stoplight = oListItem.get_item('Stoplight');
                        data.appmgr = oListItem.get_item('AIT_x0020_App_x0020_Manager');    
                        data.compdate = oListItem.get_item('Completion_x0020_Due_x0020_Date');
                        data.ait = oListItem.get_item('AIT_x0020_Number');
                        data.lob = oListItem.get_item('Business_x0020_Area');
                        data.sublob = oListItem.get_item('Business_x0020_Sub_x0020_Area');




                        masterData.push(data);

                    }//end while

                    var projectChart = dc.pieChart("#project", "project");
                    var stoplightChart = dc.pieChart("#stoplight", "stoplight");                        
                    var appmgrChart = dc.pieChart("#appmgr", "appmgr");
                    var lobChart = dc.pieChart("#lob", "lob");
                    var sublobChart = dc.pieChart("#sublob", "sublob"); 
                    var resultChart = dc.dataTable("#result_table", "result");                  

                    var ndx = crossfilter(masterData),
                        projectType = ndx.dimension(function(d) { return d.project;}),
                        stoplight = ndx.dimension(function(d) { return d.stoplight;}),
                        appMgr = ndx.dimension(function(d) { return d.appmgr;}),
                        compdate = ndx.dimension(function(d) { return d.compdate;}),
                        lob = ndx.dimension(function(d) { return d.lob;}),
                        sublob = ndx.dimension(function(d) { return d.sublob;})
                        projectTypeGroup = projectType.group();
                        stoplightGroup = stoplight.group(),
                        appMgrGroup = appMgr.group(),
                        compDateGroup = compdate.group(),
                        lobGroup = lob.group(),
                        sublobGroup = sublob.group();

                    projectChart
                    .dimension(projectType)
                    .group(projectTypeGroup)
                    .width(200)
                    .height(200)
                    .innerRadius(75)


                    stoplightChart
                    .dimension(stoplight)
                    .group(stoplightGroup)
                    .width(200)
                    .height(200)
                    .innerRadius(75)


                    appmgrChart
                    .dimension(appMgr)
                    .group(appMgrGroup)
                    .width(200)
                    .height(200)
                    .innerRadius(75)


                    lobChart
                    .dimension(lob)
                    .group(lobGroup)
                    .width(300)
                    .height(300)
                    .innerRadius(117)

                    sublobChart 
                    .dimension(sublob)
                    .group(sublobGroup)
                    .width(200)
                    .height(200)
                    .innerRadius(75)

                    resultChart
                    .dimension(compdate)
                    .group(compDateGroup)
                    .columns([
                        function(d) { return d.ait},
                        function(d) { return d.project},
                        function(d) { return d.stoplight},
                        function(d) { return d.compdate}
                            ])
                    .size(100);

                    projectChart.render();
                    stoplightChart.render();
                    appmgrChart.render();
                    lobChart.render();
                    sublobChart.render();
                    resultChart.render();






                }

                function onQueryFailed(sender, args) {
                 alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
                }

            SP.SOD.executeOrDelayUntilScriptLoaded(retrieveListItems, 'sp.js');


</script>

非常感谢您的帮助！

Answer 1

我知道了。根据{{3}}，您不能将交叉过滤器组用作数据表上的.group属性。相反，您必须在那里显式使用一个函数。

应该是

resultChart
                .dimension(compdate)
                .group(function(d) { return d.compdate;})
                .columns([
                    function(d) { return d.ait},
                    function(d) { return d.project},
                    function(d) { return d.stoplight},
                    function(d) { return d.compdate}
                        ])
                .size(100);

代替

 resultChart
                .dimension(compdate)
                .group(compDateGroup)
                .columns([
                    function(d) { return d.ait},
                    function(d) { return d.project},
                    function(d) { return d.stoplight},
                    function(d) { return d.compdate}
                        ])
                .size(100);

关于Sharepoint的aspx页面错误：仅在呈现数据表时才应使用的功能

1 个答案: