Estoy creando gráficos generados dinámicamente con , , , & .

Todos los datos están dentro del y uso Bigote como motor de plantillas para mostrar cada elemento. Creación dinámica de gráficos a partir de .

El problema que tengo es que el conjunto de datos que se ha pasado de en el objeto de gráficos se representa como un elemento, básicamente se trata como una cadena.

Además, he usado la función de división para separar cada valor, pero cuando registro los datos, ¡veo que los números están entre comillas!

No estoy seguro de cómo puedo deshacerme de las citas y / o cómo pasar los datos correctos.

$.ajax({
  type: 'get',
  url: "/data/portfolio.json",
  dataType: 'json',
  success: function(data) {
    $(data.portfolio).each(function(index, value) {
      addCharts(value);
      renderMyCharts(value.chartLabels, value.chartData, value.order);
    })
  }
});

JSON

{
  "portfolio": [{
    "title": "MesoDoc 411",
    "description": "",
    "link": "http://www.mesodoc411.com",
    "image": "/images/portfolio/mesodoc.png",
    "url": "/portfolio/",
    "order": "30",
    "chartLabels": "'HTML5', 'CSS' ",
    "chartData": "30 99"
  }]
}

JavaScript

function renderMyCharts(chartLabels, chartData, order) {
  // This function grabs the parameters from the JSON File
  // parses the chart data per Project
  var ctx = document.getElementById("myChart" + order);
  console.log(ctx);
  var kChart = "myChart" + order;

  console.log(kChart);

  console.log("passed chartLabels " + chartLabels);
  console.log("passed chartData " + chartData);
  console.log("Data type is : " + typeof chartData);

  var res = chartData.split(" ");

  console.log("string splitted  " + res);
  console.log("Data type is : " + typeof res);
  var kChart = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: [chartLabels],
      datasets: [{
        label: 'Techs  ',
        data: [res],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      legend: {
        display: true,
        labels: {
          fontColor: 'rgb(255, 99, 132)'
        }
      }

    }
  });
  console.log(kChart.data);
}

En este código, si paso 2 valores manualmente a datos como data: [76, 12], el gráfico se muestra correctamente, pero .data: [res] NO, en la consola veo:

data:Array(1)
0:Array(2)
0:"30"
1:"99"
length:2

Pero debería:

data:Array(1)
    0:Array(2)
    0:30
    1:99
    length:2

¿Alguna sugerencia?

Gracias de antemano.

0
user1661286 19 nov. 2017 a las 21:25

3 respuestas

La mejor respuesta

Puede usar Array # map.

var chartData = "30 99";
var res = chartData.split(" ");
console.log("Before:");
console.log(res);

console.log("After:");
console.log(res.map(function(x) {return x * 1;}));
.as-console-wrapper {
  position: relative;
  top: 0!important;
}
var chartData = "30, 99";
var res = chartData.split(", ");
console.log("Before:");
console.log(res);

console.log("After:");
console.log(res.map(function(x) {return x * 1;}));
.as-console-wrapper {
  position: relative;
  top: 0!important;
}

Necesitas usar:

var kChart = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: [chartLabels],
      datasets: [{
        label: 'Techs  ',
        data: data: res.map(function(x) {return x * 1;}),
0
Danny Fardy Jhonston Bermúdez 19 nov. 2017 a las 22:34

El punto de los formatos de datos como JSON, XML, etc. es que no tiene que escribir tanto código personalizado para analizar / serializar datos. En ese sentido, no estás usando JSON completamente. No sé exactamente cuál es su situación y si tiene el control de la estructura JSON. Si no, solo tendrás que usar la respuesta de Danny o algo equivalente. Si lo hace, cámbielo a esto:

"chartData": [30, 99]
0
David Knipe 19 nov. 2017 a las 22:12
data: res.map(function(x) {return x * 1;})

Hizo el truco ! Gracias Danny!

0
user1661286 20 nov. 2017 a las 21:55