Question

我无法显示包含动态数据的ChartJS饼图，我在Google上搜索了很多，也找不到解决方案，因此在这里为您提供帮助。

 window.onload = function() {
            $.ajax({
            url: 'https://jsonplaceholder.typicode.com/todos/1',
            dataType: "json",
            method: "GET",
            headers: {
              "Accept": "application/json; odata=verbose"
            },
            success: function(data) {
              // var dataResults = data.d.results;
              var tempData = [{
                  EnterpriseProjectTypeName: 'first project'
                },
                {
                  EnterpriseProjectTypeName: 'first project'
                },
                               {
                  EnterpriseProjectTypeName: 'first project'
                },
                {
                  EnterpriseProjectTypeName: 'second project'
                },
                               {
                  EnterpriseProjectTypeName: 'third project'
                },
                {
                  EnterpriseProjectTypeName: 'test'
                }
              ];

              var itermeidiaryObject = {};
              $.each(tempData, function(key, value) {
                var epn = value.EnterpriseProjectTypeName;
                var som = 0;
                if (epn != null) {
                  itermeidiaryObject[epn] = ++itermeidiaryObject[epn] || 1;
                }
                var somme = som;
              });
              var finalObject = Object.keys(itermeidiaryObject).map(function(key) {
                return {
                  label: key,
                  y: itermeidiaryObject[key]
                }
              });

    var ctx = document.getElementById('myChart').getContext('2d');
    var lables=tempData
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
                labels: finalObject,
                datasets: [{

                    data: finalObject,

                }]
            },

        options: {
        responsive: false,
        scales: {
          xAxes: [{
            ticks: {
              maxRotation: 90,
              minRotation: 80
            }
          }],
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });

                  }
    });
       }

这是html部分

  <canvas id="myChart"></canvas>
    </div><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

有人可以帮助我吗？

Answer 1

您要饼图还是条形图？进行了一些编辑以使它成为饼图，尽管您可以回到条形图上，对标签的处理方式进行一些编辑，因为看起来标签需要是数组中的单个值。可能是更好的方法，但这应该有所帮助。这是饼图。您在HTML中也有流氓div。

window.onload = function() {
            $.ajax({
            url: 'https://jsonplaceholder.typicode.com/todos/1',
            dataType: "json",
            method: "GET",
            headers: {
              "Accept": "application/json; odata=verbose"
            },
            success: function(data) {
              // var dataResults = data.d.results;
              var tempData = [{
                  EnterpriseProjectTypeName: 'first project'
                },
                {
                  EnterpriseProjectTypeName: 'first project'
                },
                               {
                  EnterpriseProjectTypeName: 'first project'
                },
                {
                  EnterpriseProjectTypeName: 'second project'
                },
                               {
                  EnterpriseProjectTypeName: 'third project'
                },
                {
                  EnterpriseProjectTypeName: 'test'
                }
              ];

              var itermeidiaryObject = {};
              $.each(tempData, function(key, value) {
                var epn = value.EnterpriseProjectTypeName;
                var som = 0;
                if (epn != null) {
                  itermeidiaryObject[epn] = ++itermeidiaryObject[epn] || 1;
                }
                var somme = som;
              });
              var finalObject = Object.keys(itermeidiaryObject).map(function(key) {
                return {
                  label: key,
                  y: itermeidiaryObject[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);
              console.log(labels);
              console.log(pievalues);
              console.log(finalObject);

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

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

        options: {
        responsive: false,

      }
    });

     }
    });
}

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

<canvas id="myChart"></canvas>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

我假设您在处理程序成功中提供的数据几乎就是您以JSON的形式获得的？

使ChartJS饼图具有动态数据

1 个答案: