时间戳

首页 > 解决方案 > 在 ChartJS 中创建动态饼图的问题

javascript - 在 ChartJS 中创建动态饼图的问题

问题描述

我正在使用 ChartJS 库创建一个动态饼图。我正在使用 Laravel 6，在我的控制器中，我有一个以 JSON 格式传递数组的函数。这是数组的结构：

[
{"label":"assistingSales","values":21},
{"label":"hseMeeting","values":12},
{"label":"training","values":30}
]

在我的 .js 文件中，我使用 JQuery 和 .GET 方法检索这些数据，然后使用 forEach 循环创建两个数组：Values和Labels。我将这些数组发送到 Web 控制台 (console.log)，它们看起来都是正确的。值是整数，标签是字符串。当我将这些数组设置为.js 文件中饼图的数据集和标签时，问题就开始了。如果我在数据集中手动写入值，Pie 显示正常，但它无法识别数组本身。

这是 .js 文件的代码

var valores   = new Array();
var etiquetas = new Array();

$(document).ready(function(){
  $.get("http://127.0.0.1:8000/percentajes", function(response){
    response.forEach(function(item){
      valores.push(item.values);
      etiquetas.push(item.labels);
    });
    console.log(valores);
    console.log(etiquetas);

    var config = {
      type: 'pie',
      data: {
          datasets: [{
          data: [ valores ],
          label: 'Dataset 1'
        }],
        labels: [ etiquetas ]},
      options: {
        responsive: true,
        legend: {
          position: 'top',
        },

        animation: {
          animateScale: true,
          animateRotate: true
        }
      }
    };
      var ctx = document.getElementById('myPieChart').getContext('2d');
      var mychart = new Chart(ctx, config);
  });
});

问题是当我将数组设置为datasets和labels时，图表没有出现。只有当我以这种方式设置它们时才会出现：

valores[0],valores[1],valores[2]
etiquetas[0],etiquetas[1],etiquetas[2]

我认为它可能与数据类型有关，但它们没关系，整数和字符串。我还尝试使用 for 循环来创建两个单独的数组，但什么也没发生。

你能检查我的代码并告诉我是否有其他或更好的方法吗？提前致谢！

标签： javascriptarraysjsonlaravelchart.js

解决方案

问题是您将数组valores和etiquetas数组包装array在config.

data: [ valores ]
labels: [ etiquetas ]

只需摆脱这些方括号，它就会起作用。

data: valores
labels: etiquetas

请查看以下可运行的代码片段。

const response = [
  {"label":"assistingSales", "values":21},
  {"label":"hseMeeting", "values":12},
  {"label":"training", "values":30}
]

var valores   = new Array();
var etiquetas = new Array();

response.forEach(function(item){
  valores.push(item.values);
  etiquetas.push(item.label);
});

var config = {
  type: 'pie',
  data: {
    datasets: [{
      data: valores,
      backgroundColor: ['#FF6384', '#36A2EB','#FFCE56']
    }],
    labels: etiquetas
  },
  options: {
    responsive: true,
    legend: {
      position: 'top',
    },
    animation: {
      animateScale: true,
      animateRotate: true
    }
  }
};
new Chart(document.getElementById('myPieChart'), config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myPieChart"></canvas>

推荐阅读