1

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
  });
});
2
  • Pues evidentemente sí que lo he hecho pero no se donde ubicar en mi código esos valores. Ahorrate esos comentarios si no sabes lo que previamente he hecho.
    – Vieira
    Commented el 11 ene. 2017 a las 17:34
  • @Marcos Gallardo, los datos que he querido modificar se refieren a la curva que dibuja la gráfica no la de los ejes... lo que no sé es donde ponder la configuración de los ejes...
    – Vieira
    Commented el 11 ene. 2017 a las 17:38

1 respuesta 1

1

Como en tu pregunta el código que publicas esta incompleto (ej: horas_mes1 es undefied) he creado otro gráfico para ejemplificar como hacer lo que necesitas.

  • Para modificar el color de los ejes, debes hacerlo a través de la prop color de Grid Lines

    options: {
      scales: {
        xAxes: [{
          gridLines:{
            color:"rgba(0,255,0,1)" // <-- Color eje X
    
  • Para desactivar las legendas debes hacerlo a través de la propiedad display de Legend

    options: {
      legend: {
        display: false // <-- Ocultar legends
    
  • Para modificar el nombre de la series, necesito saber cual y que necesitas que diga.

  • Para modificar el color de los labels del eje X, debes hacerlo a través de la propiedad fontColor de Ticks

    options: {
      scales: {
        xAxes: [{
          ticks:{
            fontColor:"orange" // <-- Color de labels eje X
    

Demo:

window.addEventListener('load', function() {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
    datasets: [{
      label: 'apples',
      data: [12, 19, 3, 17, 6, 3, 7],
      backgroundColor: "rgba(153,255,51,0.6)"
    }, {
      label: 'oranges',
      data: [2, 29, 5, 5, 2, 3, 10],
      backgroundColor: "rgba(255,153,0,0.6)"
    }]
  },
  options: {
    legend: {
      display: false // Ocultar legendas
    },
    scales: {
      xAxes: [{
        gridLines:{
          color:"rgba(0,255,0,1)",// Eje x color verde
          display: false
        },
        ticks: {
          fontColor: "orange" // Cambiar color de labels
        }
      }],
      yAxes: [{
        gridLines:{
          color:"rgba(255,0,0,1)", // Eje y color rojo
          display: false,
        }
      }]
    }
  }
});
});
.container {
  width: 80%;
  margin: 15px auto;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.js"></script>
<div class="container">
  <div>
    <canvas id="myChart"></canvas>
  </div>
</div>

3
  • Marcos funciona a la perfección... muchísimas gracias por el código.
    – Vieira
    Commented el 11 ene. 2017 a las 18:23
  • Una última pregunta por favor, sabrías decirme también para cambiar el color de las letras 'M', 'T', 'W', 'T', 'F', 'S', 'S'?
    – Vieira
    Commented el 11 ene. 2017 a las 18:33
  • @Vieira, he actualizado mi respuesta incluyendo la nueva configuración
    – Marcos
    Commented el 11 ene. 2017 a las 18:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.