Skip to main content
se añadieron 1979 caracteres en el cuerpo
Origen Enlace
hawks
  • 3.5k
  • 1
  • 6
  • 16

Para que te quede mas claro porque no se lo que estas intentando.

const datos = {
    "3/06/20": {
        new_daily_cases: 2,
        new_daily_deaths: 0,
        total_cases: 3,
        total_deaths: 0,
        total_recovery: 1,
    },
    "3/07/20": {
        new_daily_cases: 2,
        new_daily_deaths: 0,
        total_cases: 1,
        total_deaths: 0,
        total_recovery: 1,
    },
    "3/08/20": {
        new_daily_cases: 2,
        new_daily_deaths: 0,
        total_cases: 0,
        total_deaths: 0,
        total_recovery: 1,
    },
}

const dias = Object.keys(datos);
// como ves imprime los dias
console.log(dias);
// imprime casos por dia
console.log('total_cases', dias.map((dia) => datos[dia].total_cases))

//const datos = timelineitems && timelineitems[0];
// objeto de ejemplo

const datos = {
    "3/06/20": {
        new_daily_cases: 2,
        new_daily_deaths: 0,
        total_cases: 3,
        total_deaths: 0,
        total_recovery: 1,
    },
    "3/07/20": {
        new_daily_cases: 2,
        new_daily_deaths: 0,
        total_cases: 3,
        total_deaths: 0,
        total_recovery: 1,
    },
    "3/08/20": {
        new_daily_cases: 2,
        new_daily_deaths: 0,
        total_cases: 3,
        total_deaths: 0,
        total_recovery: 1,
    },
}
const dias = Object.keys(datos);
const chartOptions = {
    labels: dias,
    datasets: [
        {
            data: dias.map((dia) => datos[dia].total_cases),
            label: 'Infected',
            borderColor: '#3333ff',
            fill: true,
        },
        {
            // accedes la propiedad que quieras mostrar en la grafica
            data: dias.map((dia) => datos[dia].total_deaths),
            label: 'Deaths',
            borderColor: '#3333ff',
            fill: true,
        },
    ],
}

<Line
    data={chartOptions}
/>
const dias = Object.keys(datos);

datasets: [
    {
        data: dias.map((dia) => datos[dia].total_cases),
        label: 'Infected',
        borderColor: '#3333ff',
        fill: true,
    },
],

Para que te quede mas claro porque no se lo que estas intentando.

const datos = {
    "3/06/20": {
        new_daily_cases: 2,
        new_daily_deaths: 0,
        total_cases: 3,
        total_deaths: 0,
        total_recovery: 1,
    },
    "3/07/20": {
        new_daily_cases: 2,
        new_daily_deaths: 0,
        total_cases: 1,
        total_deaths: 0,
        total_recovery: 1,
    },
    "3/08/20": {
        new_daily_cases: 2,
        new_daily_deaths: 0,
        total_cases: 0,
        total_deaths: 0,
        total_recovery: 1,
    },
}

const dias = Object.keys(datos);
// como ves imprime los dias
console.log(dias);
// imprime casos por dia
console.log('total_cases', dias.map((dia) => datos[dia].total_cases))

//const datos = timelineitems && timelineitems[0];
// objeto de ejemplo

const datos = {
    "3/06/20": {
        new_daily_cases: 2,
        new_daily_deaths: 0,
        total_cases: 3,
        total_deaths: 0,
        total_recovery: 1,
    },
    "3/07/20": {
        new_daily_cases: 2,
        new_daily_deaths: 0,
        total_cases: 3,
        total_deaths: 0,
        total_recovery: 1,
    },
    "3/08/20": {
        new_daily_cases: 2,
        new_daily_deaths: 0,
        total_cases: 3,
        total_deaths: 0,
        total_recovery: 1,
    },
}
const dias = Object.keys(datos);
const chartOptions = {
    labels: dias,
    datasets: [
        {
            data: dias.map((dia) => datos[dia].total_cases),
            label: 'Infected',
            borderColor: '#3333ff',
            fill: true,
        },
        {
            // accedes la propiedad que quieras mostrar en la grafica
            data: dias.map((dia) => datos[dia].total_deaths),
            label: 'Deaths',
            borderColor: '#3333ff',
            fill: true,
        },
    ],
}

<Line
    data={chartOptions}
/>
se eliminaron 27 caracteres en el cuerpo
Origen Enlace
hawks
  • 3.5k
  • 1
  • 6
  • 16

Puedes guardar las keys del objeto datos. Las keys serían las fechas y en el map con el indicela key puedes acceder laal objeto por key y asi acceder a los datos de ese objeto.

const keysdias = Object.keys(datos);

datasets: [
    {
        data: datosdias.map((caso, idia) => {
            const diaKey = keys[i];
            return caso[diaKey]datos[dia].total_cases; // solo imprime un solo dato,   
        }total_cases),
        label: 'Infected',
        borderColor: '#3333ff',
        fill: true,
    },
],

Tienes que entender que map al fin al cabo es un for-loop pero en vez de recorrer los elementos de manera tradicional con el indice con map le pasa el callback que indica lo que quieres hacer con cada elemento del array.

Al final map siempre devuelve un array nuevo. https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/map

Puedes guardar las keys del objeto datos. Las keys serían las fechas y en el map con el indice puedes acceder la key y asi acceder a los datos de ese objeto.

const keys = Object.keys(datos);

datasets: [
    {
        data: datos.map((caso, i) => {
            const diaKey = keys[i];
            return caso[diaKey].total_cases; // solo imprime un solo dato,   
        }),
        label: 'Infected',
        borderColor: '#3333ff',
        fill: true,
    },
],

Tienes que entender que map al fin al cabo es un for-loop pero en vez de recorrer los elementos de manera tradicional con el indice con map le pasa el callback que indica lo que quieres hacer con cada elemento del array.

Al final map siempre devuelve un array nuevo. https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/map

Puedes guardar las keys del objeto datos. Las keys serían las fechas y en el map con la key puedes acceder al objeto por key y asi acceder a los datos de ese objeto.

const dias = Object.keys(datos);

datasets: [
    {
        data: dias.map((dia) => datos[dia].total_cases),
        label: 'Infected',
        borderColor: '#3333ff',
        fill: true,
    },
],

Tienes que entender que map al fin al cabo es un for-loop pero en vez de recorrer los elementos de manera tradicional con el indice con map le pasa el callback que indica lo que quieres hacer con cada elemento del array.

Al final map siempre devuelve un array nuevo. https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/map

Origen Enlace
hawks
  • 3.5k
  • 1
  • 6
  • 16

Puedes guardar las keys del objeto datos. Las keys serían las fechas y en el map con el indice puedes acceder la key y asi acceder a los datos de ese objeto.

const keys = Object.keys(datos);

datasets: [
    {
        data: datos.map((caso, i) => {
            const diaKey = keys[i];
            return caso[diaKey].total_cases; // solo imprime un solo dato,   
        }),
        label: 'Infected',
        borderColor: '#3333ff',
        fill: true,
    },
],

Tienes que entender que map al fin al cabo es un for-loop pero en vez de recorrer los elementos de manera tradicional con el indice con map le pasa el callback que indica lo que quieres hacer con cada elemento del array.

Al final map siempre devuelve un array nuevo. https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/map