Вертикальная гистограмма с использованием списка SharePoint

Question

Мне нужно создать гистограмму с накоплением, используя данные сложного списка SharePoint, используя REST, JavaScript.Основная проблема здесь в том, что я не получаю правильные наборы данных.

Позвольте мне прояснить мой сценарий здесь: Предположим, у меня есть список SharePoint-2013 с 6 столбцами.Мне нужен гистограмма, основанная на столбце-1 (Тип проекта) по оси X, сложенная столбцом-2 (Технология) с помощью подсчета различных технологий по оси Y.У меня 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, будь то chart.js / google chart.js / highlightchat.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>