在 ChartJS 中创建动态饼图的问题答案

【问题标题】：Problem to create dynamic pie chart in ChartJS在 ChartJS 中创建动态饼图的问题
【发布时间】：2020-07-07 18:57:16
【问题描述】：

我正在使用 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 文件中饼图的 dataset 和 labels 时，问题就开始了。如果我在数据集中手动写入值，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 循环来创建两个单独的数组，但什么也没发生。

您能否检查我的代码并告诉我是否有其他或更好的方法可以做到这一点？提前致谢！

【问题讨论】：

标签： javascript arrays json laravel chart.js

【解决方案1】：

问题是您将valores 和etiquetas 数组包装在config 内的另一个array 中。

data: [ valores ]
labels: [ etiquetas ]

只要去掉这些方括号就可以了。

data: valores
labels: etiquetas

请看下面的可运行代码sn-p。

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>

【讨论】：