Grafico подставляют Хоры y Minutos

Буэнос-Айрес días, общие количества Estoy intentando hacer un gráfico que muestre las horas y minutos de классы соло que da un profesor al mes. Tan он logrado que muestre en la linea las horas pero я gustaría que saliesen los minutos también. La consulta la hago en PHP y luego paso las variables JS. Gracias:

<div class="panel-body">Taught hours chart
                        <div class="canvas-wrapper">
                            <canvas class="main-chart" id="line-chart" height="200" width="600"></canvas>
                        </div>
                    </div>    
<script>
    var horas_mes1 = '<?php echo $horas2_mes1 ?>';
    var min_mes1 = '<?php echo $min2_mes1 ?>';
    var horas_mes2 = '<?php echo $horas2_mes2 ?>';
    var min_mes2 = '<?php echo $min2_mes2 ?>';
    var horas_mes3 = '<?php echo $horas2_mes3 ?>';
    var min_mes3 = '<?php echo $min2_mes3 ?>';
    var horas_mes4 = '<?php echo $horas2_mes4 ?>';
    var min_mes4 = '<?php echo $min2_mes4 ?>';
    var horas_mes5 = '<?php echo $horas2_mes5 ?>';
    var min_mes5 = '<?php echo $min2_mes5 ?>';
    var mes1letra = '<?php echo $mes1letra ?>';
    var mes2letra = '<?php echo $mes2letra ?>';
    var mes3letra = '<?php echo $mes3letra ?>';
    var mes4letra = '<?php echo $mes4letra ?>';
    var mes5letra = '<?php echo $mes5letra ?>';

    var lineChartData = {
        labels :[mes1letra,mes2letra,mes3letra,mes4letra,mes5letra],
        datasets : [
            {
                label: "My First dataset",
                fillColor : "rgba(48, 164, 255, 0.2)",
                strokeColor : "rgba(48, 164, 255, 1)",
                pointColor : "rgba(48, 164, 255, 1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(48, 164, 255, 1)",
                data : [horas_mes1,horas_mes2,horas_mes3,horas_mes4,horas_mes5]
            }
        ]
    }
    window.onload = function(){
    var chart1 = document.getElementById("line-chart").getContext("2d");
    window.myLine = new Chart(chart1).Line(lineChartData, {
        responsive: true,
        scaleLineColor: "rgba(255,255,255,.2)", 
        scaleGridLineColor: "rgba(255,255,255,.05)", 
        scaleFontColor: "#ffffff"
    });
    }
    </script>
1
задан 23.01.2017, 05:30
0 ответов

Чтобы начинаться, я думаю, что он был бы лучше:

  • Присоединять часы с минутами, чтобы иметь десятичное общее количество часов, например: 49.50 horas, где дробная часть равняется в минуты.
  • Получать данные из-за ajax, потому что Chart.js - книжный магазин, который нуждается в доступных данных в языке сценариев JavaScript.

В этой точке я предполагаю, что имеются в базе данных минуты дополнительно классов, так как, иметь количество часов и то же количество в минуты (h * 60) не имел бы никакого чувства.

Давайте говорить, что ты приносишь базы данных часы и минуты класса из-за каждого месяца:

$monthHours = array(
  "mes1" => 75,
  "mes2" => 80,
  "mes3" => 83
  "mes4" => 78
);

$monthMinutes = array(
  "mes1" => 25,
  "mes2" => 37,
  "mes3" => 18,
  "mes4" => 29
);

В клиенте, что мы можем делать, состоит в том, чтобы знать процентное содержание 1h каждой минуты. Основная математика: если 1h = 60m = 100% | Xm = %?.

const totalHours = [];
for (let key in monthHours) {
  const val = monthHours[key];
  const minute = monthMinutes[key] / 100;
  totalHours.push(val + minute);
}

В случае пошли часы с backend в простом array (не ассоциативном) как $monthHours = array(75, 80, 83, 78), тогда предыдущее может осуществляться используя Array#map.

const totalHours = hours.map(function (hour, i) {
  const minute = minutes[i] / 100;
  return hour += minute;
});

Tooltips, настроенные в Chart.js

Chart.js позволяет нам настраивать tooltips, чтобы показывать персонализированную информацию. Эта функциональность полезная например, когда мы работаем с монетами. Чтобы настраивать tooltips, достаточно создавать объект с ключом tooltips.callbacks.label. Эта ключ принимает функцию, которая получает два параметра: tooltip настоящий и я возражаю data (наши datasets).

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} horas y ${minutes} minutos`;
      }
    }
  }
};

В коде наверху только мы извлекаем час label, на котором он был сделан hover. Позже, мы извлекаем минуты часов и даем ему следующий формат:

X часы и Y минуты

Как только уже у нас есть все, мы это соединяем и получаем желанный результат.

Ты можешь видеть код в функционировании далее (или также в этом fiddle):

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

  let monthHours = {
    mes1: 78,
    mes2: 80,
    mes3: 83,
    mes4: 78,
    mes5: 79
  };
  let monthMinutes = {
    mes1: 25,
    mes2: 37,
    mes3: 18,
    mes4: 29,
    mes5: 32
  };
  const totalHours = [];

  for (let key in monthHours) {
    const val = monthHours[key];
    const minute = monthMinutes[key];
    totalHours.push(val + (minute / 100));
  }
  const labels = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo'];
  const datasets = [
    {
      label: 'Horas de clases',
      backgroundColor: 'rgba(0, 150, 255, .13)',
      borderColor: 'rgba(0, 150, 255, .35)',
      pointColor: '#3498db',
      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} horas y ${minutes} minutos`;
        }
      }
    }
  };

  new Chart.Line(ctx, {
    data: { labels, datasets },
    options
  });
});
<!-- Chart.js -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

<!-- HTML (canvas) -->
<section class="chart">
  <canvas id="draw" height="300" width="700"></canvas>
</section>
2
ответ дан 03.12.2019, 17:47
  • 1
    Perfectí simo @guzgarcia. Функционируй в perfecció n. Я тебе благодарен много за это усилие! –  10.01.2017, 17:31
  • 2
    ú ltima вопрос. иногда не загружает это мне... deberí чтобы помещать его window.onload = function () {???? –  10.01.2017, 18:25
  • 3
    Конечно grá fica должен быть загруженным однажды документ был renderizado. В window#onload или document#DOMContentLoaded служи. –  10.01.2017, 18:31
  • 4
    Спасибо, и в fiddle podrí схвати помещать? дело в том, что в меня оно я функционировало así: window.onload = function () { window.myLine = new Диаграмма (chart1).Line (lineChartData, { responsive: true, scaleLineColor: " rgba (255,255,255.2) " scaleGridLineColor: " rgba (255,255,255.05) " scaleFontColor: " #ffffff" }); } –  10.01.2017, 18:34
  • 5
    Уже está в месте /4 в конце унифицированного указателя ресурса fiddle, помести ему /5. –  10.01.2017, 18:53

Теги

Похожие вопросы