Skip to main content
se eliminaron 15 caracteres en el cuerpo; etiquetas editadas
Origen Enlace
Marcos
  • 35.6k
  • 7
  • 36
  • 70

Buenas tardes, tengo un script con un gráfico lineal el cual no sé como quitarle la leyenda y cambiarle los colores de los ejes y nombre de las series. Agradecería si me echaran un cable por favor.

document.addEventListener('DOMContentLoaded', function () {
    const ctx = document.getElementById('draw').getContext('2d');

  let monthHours = {
    mes1: horas_mes1,
    mes2: horas_mes2,
    mes3: horas_mes3,
    mes4: horas_mes4,
    mes5: horas_mes5
  };
  let monthMinutes = {
    mes1: min_mes1,
    mes2: min_mes2,
    mes3: min_mes3,
    mes4: min_mes4,
    mes5: min_mes5
  };
  const totalHours = [];

  for (let key in monthHours) {
    const val = monthHours[key] / 1;
    const minute = monthMinutes[key];
    totalHours.push(val + (minute / 100));
  }
  
  const labels = [mes1letra,mes2letra,mes3letra,mes4letra,mes5letra];
  const datasets = [
    {
      label: 'Horas de clases',
      backgroundColor: 'rgba(0, 150, 255, .13)',
      borderColor: 'rgba(255, 255, 255, .35)',
      pointColor: '#fff',
      pointBorderColor: 'rgba(0, 150, 255, .55)',
      pointBackgroundColor: '#fff',
      data: totalHours
    }
  ];
  const options = {
    tooltips: {
      callbacks: {
        label: function (tooltip, data) {
          const index = tooltip.index;
          let hours = data.datasets[0].data[index];
          let minutes = (hours % 1).toFixed(2);
          hours = parseInt(hours);
          minutes = minutes.substring(minutes.indexOf('.') + 1);
          return `${hours} hours y ${minutes} minutes`;
        }
      }
    }
  };

  new Chart.Line(ctx, {
    data: { labels, datasets },
    options
  });
});

Buenas tardes, tengo un script con un gráfico lineal el cual no sé como quitarle la leyenda y cambiarle los colores de los ejes y nombre de las series. Agradecería si me echaran un cable por favor.

document.addEventListener('DOMContentLoaded', function () {
    const ctx = document.getElementById('draw').getContext('2d');

  let monthHours = {
    mes1: horas_mes1,
    mes2: horas_mes2,
    mes3: horas_mes3,
    mes4: horas_mes4,
    mes5: horas_mes5
  };
  let monthMinutes = {
    mes1: min_mes1,
    mes2: min_mes2,
    mes3: min_mes3,
    mes4: min_mes4,
    mes5: min_mes5
  };
  const totalHours = [];

  for (let key in monthHours) {
    const val = monthHours[key] / 1;
    const minute = monthMinutes[key];
    totalHours.push(val + (minute / 100));
  }
  
  const labels = [mes1letra,mes2letra,mes3letra,mes4letra,mes5letra];
  const datasets = [
    {
      label: 'Horas de clases',
      backgroundColor: 'rgba(0, 150, 255, .13)',
      borderColor: 'rgba(255, 255, 255, .35)',
      pointColor: '#fff',
      pointBorderColor: 'rgba(0, 150, 255, .55)',
      pointBackgroundColor: '#fff',
      data: totalHours
    }
  ];
  const options = {
    tooltips: {
      callbacks: {
        label: function (tooltip, data) {
          const index = tooltip.index;
          let hours = data.datasets[0].data[index];
          let minutes = (hours % 1).toFixed(2);
          hours = parseInt(hours);
          minutes = minutes.substring(minutes.indexOf('.') + 1);
          return `${hours} hours y ${minutes} minutes`;
        }
      }
    }
  };

  new Chart.Line(ctx, {
    data: { labels, datasets },
    options
  });
});

tengo un script con un gráfico lineal el cual no sé como quitarle la leyenda y cambiarle los colores de los ejes y nombre de las series. Agradecería si me echaran un cable por favor.

document.addEventListener('DOMContentLoaded', function () {
    const ctx = document.getElementById('draw').getContext('2d');

  let monthHours = {
    mes1: horas_mes1,
    mes2: horas_mes2,
    mes3: horas_mes3,
    mes4: horas_mes4,
    mes5: horas_mes5
  };
  let monthMinutes = {
    mes1: min_mes1,
    mes2: min_mes2,
    mes3: min_mes3,
    mes4: min_mes4,
    mes5: min_mes5
  };
  const totalHours = [];

  for (let key in monthHours) {
    const val = monthHours[key] / 1;
    const minute = monthMinutes[key];
    totalHours.push(val + (minute / 100));
  }
  
  const labels = [mes1letra,mes2letra,mes3letra,mes4letra,mes5letra];
  const datasets = [
    {
      label: 'Horas de clases',
      backgroundColor: 'rgba(0, 150, 255, .13)',
      borderColor: 'rgba(255, 255, 255, .35)',
      pointColor: '#fff',
      pointBorderColor: 'rgba(0, 150, 255, .55)',
      pointBackgroundColor: '#fff',
      data: totalHours
    }
  ];
  const options = {
    tooltips: {
      callbacks: {
        label: function (tooltip, data) {
          const index = tooltip.index;
          let hours = data.datasets[0].data[index];
          let minutes = (hours % 1).toFixed(2);
          hours = parseInt(hours);
          minutes = minutes.substring(minutes.indexOf('.') + 1);
          return `${hours} hours y ${minutes} minutes`;
        }
      }
    }
  };

  new Chart.Line(ctx, {
    data: { labels, datasets },
    options
  });
});
Origen Enlace
Vieira
  • 325
  • 1
  • 6
  • 19

Cambiar color de los ejes de un gráfico lineal y quitar leyenda

Buenas tardes, tengo un script con un gráfico lineal el cual no sé como quitarle la leyenda y cambiarle los colores de los ejes y nombre de las series. Agradecería si me echaran un cable por favor.

document.addEventListener('DOMContentLoaded', function () {
    const ctx = document.getElementById('draw').getContext('2d');

  let monthHours = {
    mes1: horas_mes1,
    mes2: horas_mes2,
    mes3: horas_mes3,
    mes4: horas_mes4,
    mes5: horas_mes5
  };
  let monthMinutes = {
    mes1: min_mes1,
    mes2: min_mes2,
    mes3: min_mes3,
    mes4: min_mes4,
    mes5: min_mes5
  };
  const totalHours = [];

  for (let key in monthHours) {
    const val = monthHours[key] / 1;
    const minute = monthMinutes[key];
    totalHours.push(val + (minute / 100));
  }
  
  const labels = [mes1letra,mes2letra,mes3letra,mes4letra,mes5letra];
  const datasets = [
    {
      label: 'Horas de clases',
      backgroundColor: 'rgba(0, 150, 255, .13)',
      borderColor: 'rgba(255, 255, 255, .35)',
      pointColor: '#fff',
      pointBorderColor: 'rgba(0, 150, 255, .55)',
      pointBackgroundColor: '#fff',
      data: totalHours
    }
  ];
  const options = {
    tooltips: {
      callbacks: {
        label: function (tooltip, data) {
          const index = tooltip.index;
          let hours = data.datasets[0].data[index];
          let minutes = (hours % 1).toFixed(2);
          hours = parseInt(hours);
          minutes = minutes.substring(minutes.indexOf('.') + 1);
          return `${hours} hours y ${minutes} minutes`;
        }
      }
    }
  };

  new Chart.Line(ctx, {
    data: { labels, datasets },
    options
  });
});