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

Question

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

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

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

我打开任何 Chat.js 是否是图表。js/google 图表。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 列表的垂直堆叠条形图

Vertical stacked bar chart using SharePoint List

javascript

arrays

rest

sharepoint-2013

chart.js