1 Pregunta: Gráfico de línea multi dataset de la tabla

pregunta creada en Wed, May 8, 2019 12:00 AM

Estoy tratando de crear un gráfico de líneas de múltiples conjuntos utilizando el gráfico js y el ángulo. Al usar map, puedo reducir los datos json a una sola matriz dimensional, pero necesito convertir uno de column (head) como etiqueta con una columna promedio como eje y y columna de marca de tiempo como eje x

Formato json de muestra o /p de DB

var dataset = 
[{id:1, head:test1,timestamp:5/6/2019,average:12},]
{id:2, head:test1,timestamp:6/6/2019,average:15},
{id:3, head:test2,timestamp:5/6/2019,average:7},
{id:4, head:test2,timestamp:6/6/2019,average:20},
{id:5, head:test3,timestamp:6/6/2019,average:13}]

Formato esperado para chartjs para salida de varios ejes y

 {data : [12, 15], label:test1},
 {data : [7, 20], label:test2},
 {data : [0, 13], label:test3},

Solo puedo convertir cada uno de los datos de la columna en una sola matriz dimensional, pero como estoy convirtiendo todo el conjunto de datos en una matriz 1D, existe la posibilidad de que los datos no coincidan, si intento obtener una gráfica directamente.

var labels = dataset.map(function(obj) {return obj.head});
var tstamp = dataset.map(function(obj) {return obj.timestamp});
var tavg = dataset.map(function(obj) {return obj.average});

Le ruego que me haga saber sus sugerencias sobre cómo convertir los datos al formato esperado.

    
1
1 Respuestas                              1                         

Primero debes reducir el objeto al indexar el resultado:

const data = dataset.reduce((accu, item) => {
  if (accu[item.head] == null) accu[item.head] = { data: [], label: item.head };
  accu[item.head].data.push(item.average);
  return accu;
}, {});

luego extraiga los valores del resultado

const result = Object.values(data);

después de eso, puede rellenar el campo de resultado .data para obtener la aridad correcta

result.forEach(line => {
  while (line.data.length < 2) 
    line.data.unshift(0);
});

    
0
2019-05-08 16: 23: 28Z
  1. Gracias, funcionó
    2019-05-10 16: 39: 41Z
fuente colocada aquí