Менять цвет осей линейного графика и снимать легенду

у меня есть рукописный шрифт с линейным графиком, который я не знаю, как лишение его легенды и менять ему цвета осей и имя серий. Он был бы благодарен, если бы они бросили мне кабель пожалуйста.

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
  });
});
1
задан 08.10.2019, 00:20
0 ответов

Как в твоем вопросе код, что ты печатаешь эту неполно (ej: horas_mes1 он undefied) я создал другой график, чтобы подтверждать примерами, как делание того, в чем ты нуждаешься.

  • Чтобы изменять цвет осей, ты должен делать это через prop color Грид Линес

    options: {
      scales: {
        xAxes: [{
          gridLines:{
            color:"rgba(0,255,0,1)" // <-- Color eje X
    
  • Чтобы дезактивировать legendas ты должен делать это через свойство display Legend

    options: {
      legend: {
        display: false // <-- Ocultar legends
    
  • Чтобы изменять имя серий, нуждался в том, чтобы знать, который, и что тебе нужно, чтобы он сказал.

  • Чтобы изменять цвет labels оси X, ты должен делать это через свойство fontColor 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>
1
ответ дан 03.12.2019, 17:45
  • 1
    Маркос функционирует в perfecció n... muchí пропасти спасибо за có я говорю. –  11.01.2017, 20:23
  • 2
    ú ltima спроси пожалуйста, sabrí схвати говорить мне tambié n, чтобы менять цвет букв ' M' ' T' ' W' ' T' ' F' ' S' ' S'? –  11.01.2017, 20:33
  • 3
    @Vieira, я обновил мой ответ включая новость configuració n –  11.01.2017, 20:41