Question

我必须使用REST，JavaScript使用SharePoint复杂列表数据创建堆积条形图。这里的主要问题是我没有得到正确的数据集。

让我在这里清楚我的场景：假设我有一个包含6列的SharePoint-2013列表。我需要一个基于x轴上的第1列（项目类型）的条形码，通过第2列（技术）在y轴上通过不同技术的计数进行堆叠。我有7个项目类型＆amp; 15技术＆amp;希望用它们的组合处理大约200行。

Project Java Python SharePoint .Net
A        3     5        12       1
B        4     7        6        3
C        0     9        1        0

我打开任何Chat.js是否是chart.js / google chart.js / highlight chat.js我唯一想要数据是动态的意味着每当用户向项目列添加更多值时应添加到x轴自动。

我对此很新。任何人都可以帮我解决这个问题。还需要代码部分。非常感谢提前。

Answer 1

供您参考的代码示例：

<div style="width:600px;height:400px;">
    <canvas id="myChart" width="600" height="400"></canvas>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script type="text/javascript">
var colors = ["#009EA0", "#A7A9AC", "#D15F27", "#BAD80A", "#E0AA0F", "#754760", "#373535"];
var listName = "CL26"; //Data List Name
var xAxisName="Title";
var yAxisName=["Java","Python","SharePoint","DotNet"];
$(document).ready(function() {
    var requestUri = _spPageContextInfo.webAbsoluteUrl +
                  "/_api/Web/Lists/getByTitle('"+listName+"')/items";

    //execute AJAX request
    $.ajax({
        url: requestUri,
        type: "GET",
        headers: { "ACCEPT": "application/json;odata=verbose" },
        success: function (data) {
            var myLabels=[];
            var myDataSets=[];
            $.each(data.d.results, function(i, item) {
                myLabels.push(item[xAxisName]);    
            });
            for(var i=0;i<yAxisName.length;i++){ 
                var myData=[];                  
                $.each(data.d.results, function(j, item) {
                    myData.push(item[yAxisName[i]]);
                });
                myDataSets.push({
                    label:yAxisName[i],
                    backgroundColor:colors[i],
                    data:myData
                });                 
            }
            buildBarChart(myLabels,myDataSets);
        },
        error: function () {
            //alert("Failed to get details");
        }
    });
});

function buildBarChart(myLabels,myDataSets){
    var barChartData = {
        labels: myLabels,
        datasets: myDataSets
    };
    var ctx = document.getElementById('myChart').getContext('2d');
    var myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                title: {
                    display: true,
                    text: 'MyProject'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
                responsive: true,
                scales: {
                    xAxes: [{
                        stacked: true,
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                }
            }
        });
}   
</script>

使用SharePoint列表的垂直堆积条形图

1 个答案: