Tengo un conjunto de datos que contiene un valor de fecha y otros 3 valores. Por ejemplo:
{ "minimum": "71", "maximum": "74", "meanAverage": "72", "dateTime": "2018-03-28T13:46:00" }, { "minimum": "57", "maximum": "87", "meanAverage": "71", "dateTime": "2018-03-28T18:00:01" },Me gustaría crear un gráfico utilizando los gráficos altos de reacción con las fechas en el eje x y luego 3 líneas en el eje y que muestren los 3 valores correspondientes para todas las fechas.
Hasta ahora, pensé en usar 3 matrices diferentes para pasar a series.data . Cada matriz tendría el valor x (fecha) y luego el valor y. Para los mínimos, sería:
['2018-03-28T13:46:00', '71'] ['2018-03-28T18:00:01', '57'] ... Y en el objeto de options , tendría algo como:
series: [ { data: minimuns }, { data: maximuns }, { data: meanAverages }, ]Pero esto no funciona y tengo algunos problemas para encontrar la información para hacerlo correctamente. ¿Alguna ayuda?
Debe analizar el objeto json en un formato de datos adecuado.
Consulte los documentos para conocer los formatos de datos aceptados: https://api.highcharts.com/highcharts/series.line.data
Tenga en cuenta que el valor de y debe ser un número.
La configuración de ejemplo:
const json = '[{"minimum": 71, "maximum": 74, "meanAverage": 72, "dateTime": "2018-03-28T13:46:00"}, {"minimum": 57,"maximum": 87, "meanAverage": 71, "dateTime": "2018-03-28T18:00:01"}]', parsed = JSON.parse(json); const minimum = []; parsed.forEach(data => { minimum.push([new Date(data.dateTime).getTime(), data.minimum]) }) const maximum = []; parsed.forEach(data => { maximum.push([new Date(data.dateTime).getTime(), data.maximum]) }) const meanAverage = []; parsed.forEach(data => { meanAverage.push([new Date(data.dateTime).getTime(), data.meanAverage]) })Luego puede usar sus matrices de datos como esperaba:
series: [{ data: minimum }, { data: maximum }, { data: meanAverage } ]Demostración: https://jsfiddle.net/BlackLabel/2ncb83eh/