Проблема создания динамического c p ie графика в ChartJS - PullRequest
Новая
       4

Проблема создания динамического c p ie графика в ChartJS

0 голосов
/ 27 марта 2020

Я создаю динамический c P ie график с библиотекой Chart JS. Я использую Laravel 6, и в моем контроллере у меня есть функция, которая передает массив в формате JSON. Это структура массива: 

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

В моем файле. js я получаю эти данные, используя JQuery и метод .GET, а затем использую forEach L oop для создания два массива: Значения и Метки . Я отправляю эти массивы в веб-консоль (console.log), и они отображаются справа. Значения являются целыми числами, а метки являются строками. Проблема начинается, когда я устанавливаю эти массивы как набор данных и метки для диаграммы P ie в файле. js. Если я вручную запишу значения в наборе данных, P ie будет отображаться нормально, но не сможет распознать сам массив.

Это код для js файла

* 1015. *

Проблема в том, что диаграмма не появляется, когда я устанавливаю массивы как наборы данных и метки . Он появляется только в том случае, если я установил их следующим образом: 

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

Я думал, что это может быть связано с типами данных, но они в порядке, целые числа и строки. Я также пытался использовать for-l oop для создания двух отдельных массивов, но ничего не произошло.

Можете ли вы проверить мой код и сказать мне, если есть какой-то другой или лучший способ сделать это? Заранее спасибо!

1 Ответ

0 голосов
/ 27 марта 2020

Проблема в том, что вы помещаете массивы 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>
...