显示带有动态数据的chartjs条形图答案

【问题标题】：Display chartjs bar chart with dynamic data显示带有动态数据的chartjs条形图
【发布时间】：2019-07-18 17:07:24
【问题描述】：

我需要显示一个必须使用带有动态数据的 chartJs 制作的条形图，我从 xml 链接获取这些动态数据。我使用两个数据字段：TaskName 和 TaskPercentCompleted 最终结果必须是这样的： https://scontent.ftun3-1.fna.fbcdn.net/v/t1.15752-9/67290623_1101713790034749_6213821876259520512_n.png?_nc_cat=107&_nc_oc=AQkVef74ok1IcC0m0ujX4t7c4EhNAEs0C-lejsBTHCj9U2zrFRo2UA_gWnuOeA4ZJco&_nc_ht=scontent.ftun3-1.fna&oh=e8503be685f36c7440362b5a0d3c85f5&oe=5DA3B54E 这是 xml 链接的一部分： https://scontent.ftun3-1.fna.fbcdn.net/v/t1.15752-9/66803472_2156647134463530_3324310068698021888_n.png?_nc_cat=100&_nc_oc=AQmuJ-gA1lT7F-whtw329vy_eciZoCWNn5hxCW2Zdp4X_RBfyZknVR1Bza-UF_nDn7s&_nc_ht=scontent.ftun3-1.fna&oh=d6ced2436a0c666be4dfd4fe5138a72f&oe=5DAADE21 我得到了一个代码，但它没有按我想要的方式工作，它正在重新组合数据，我不想要这样。

  window.addEventListener('load',function() {
var dataURL = _spPageContextInfo.webAbsoluteUrl + "/_api/ProjectData/[en-US]/Tasks?$select=TaskName,TaskPercentCompleted&$filter=ProjectName%20eq%20%27Bay%20Plaza%27%20and%20TaskIsSummary%20eq%20true%20and%20TaskIsProjectSummary%20eq%20false";
      $.ajax({
        url: dataURL,
            method: "GET",
            headers: {
              "Accept": "application/json; odata=verbose"
            },
            success: function(data) {
               var dataResults = data.d.results;


              var itermeidiaryObject = {};
              $.each(dataResults, function(key, value) {
                var nomTask = value.TaskName;
                var epn = value.TaskPercentCompleted;

                if (epn != null) {
                  itermeidiaryObject[epn] = ++itermeidiaryObject[epn] || 1;
                }
              });
              var finalObject = Object.keys(itermeidiaryObject).map(function(key) {
                return {
                  label: itermeidiaryObject[key],
                  y: key
                }
              });

              var pievalues = finalObject.map(function(value, index) {
                return value.y;
              });

              var labels = finalObject.map(function(value, index) {
                return value.label;
              });

              var colorscheme = colors.slice(0, labels.length);

    var ctx = document.getElementById('myChart2').getContext('2d');

    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
                labels: labels,
                datasets: [{
                            data: pievalues,
                  backgroundColor: colorscheme
                            }]
            },

        options: {
        responsive: true,
            scales: {
            xAxes: [{
                ticks: {
                    beginAtZero: true // Edit the value according to what you need
                }
            }],
            yAxes: [{
                stacked: true
            }]
        },
            title: {
      display: true,
      position: "top",
      text: "Nombre de projets par direction",
      fontSize: 18,
      fontColor: "#111"
    },
     legend: {
      display: false
      }

      }
    });

     }
    });
});

var colors =  ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"];

【问题讨论】：

标签： javascript sharepoint dynamic chart.js

【解决方案1】：

我解决了问题

 window.addEventListener('load',function() {
$.ajax({
    url: _spPageContextInfo.webAbsoluteUrl + "/_api/ProjectData/[en-US]/Tasks?$select=TaskName,TaskPercentCompleted&$filter=ProjectName%20eq%20%27Bay%20Plaza%27%20and%20TaskIsSummary%20eq%20true%20and%20TaskIsProjectSummary%20eq%20false",
    method: "GET",
    headers: { "Accept": "application/json; odata=nometadata" },
    success: function (data) {
        if (data.value.length > 0) {

            var pieValues = [];
            var pieLabels = [];

            for (var i = 0; i < data.value.length; i++) {
                pieValues.push(parseInt(data.value[i].TaskPercentCompleted));
                pieLabels.push(data.value[i].TaskName);
            }
            var pieData = {
                datasets: [{
                    data: pieValues,
                    backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850",
                    "#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850",
                    "#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850",
                    "#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850",
                    "#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850",
                    "#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
                }],

                labels: pieLabels
            };
            var ctx = document.getElementById("myChart2");

            var myPieChart = new Chart(ctx, {
                    //type: 'pie',
                    type: 'bar',
                    data: pieData,
                    options: {
    responsive: true,
    legend: { display: false },
      title: {
        display: true,
        text: 'Nom de tâche par pourcentage'
      },
    scales: {
      xAxes: [{
        ticks: {
          maxRotation: 90,
          minRotation: 90,
          display: false
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }


                });
            }
        },
        error: function (data) {
            //
        }
    });
});

【讨论】：