Линейный график с использованием диаграммы. js - PullRequest
Новая
       57

Линейный график с использованием диаграммы. js

0 голосов
/ 13 марта 2020

У меня есть две таблицы, которые я получил после выполнения запроса mysql (table1 - pl_pl, а table2 - act_act) в виде: 

table1:

label   act_hrs
Jan-19  7
Feb-20  8
Mar-20  9

table2:
label   pl_hrs
Mar-20  45
Apr-20  53

Я должен пометить все точки в act_hrs и pl_hrs с использованием линейной диаграммы с общей осью х label. Я попробовал следующий javascript код для этого:

javascript код : 

function show_scurve_Graph()
        {
            {
                var plandata = <?php echo json_encode($pl_pl); ?>;
                var actualdata = <?php echo json_encode($act_act); ?>;

                var labels = [];
                  for (var i in plandata) {
                        labels.push(plandata[i].label);
                  }
                  for (var j in actualdata) {
                        labels.push(actualdata[j].label);
                  }

                new Chart("scurve_chart", {
  type: 'line',
  data: {
    labels: Array.from(labels),
    datasets: [{
        label: "Planned Hours",
        fill: false,
        borderColor: "rgba(255, 0, 0, 1)",
        pointHoverBackgroundColor: "rgba(255, 0, 0, 1)",
        data: plandata.map(o => ({ x: Number(o.label), y: Number(o.pl_hrs)}))
      },
      {
        label: "Actual Hours",
        fill: false,
        backgroundColor: "rgba(0, 255, 0, 0.75)",
        borderColor: "rgba(0, 255, 0, 1)",
        pointHoverBackgroundColor: "rgba(0, 255, 0, 1)",
        pointHoverBorderColor: "rgba(0, 255, 0, 1)",
        data: actualdata.map(o => ({x: Number(o.label), y: Number(o.act_hrs)}))
      }
    ]
  },
  options: {    
    tooltips: {
      callbacks: {
        title: (tooltipItem, data) => "Month " + data.datasets[tooltipItem[0].datasetIndex].data[tooltipItem[0].index].x
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        },
       scaleLabel: {
        display: true,
        labelString: 'Hours'
      }
      }],
      xAxes: [{
        ticks: {          
          min: 0,
          max: 53,
          stepSize: 1
        },
        scaleLabel: {
        display: true,
        labelString: 'Month'
      }
      }]
    }
  }
});
 }}

Я использовал следующую библиотеку для этого: 

<script src="vendors/jquery/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>

Я получил что-то вроде этого: enter image description here

1 Ответ

0 голосов
/ 13 марта 2020

Следующие строки являются виновниками: 

data: plandata.map(o => ({ x: Number(o.label), y: Number(o.pl_hrs)}))

и 

data: actualdata.map(o => ({x: Number(o.label), y: Number(o.act_hrs)}))

Обратный вызов map должен возвращать только цифры часа, например: 

// Planned
data: plandata.map(o => Number(o.pl_hrs))

// Actual
data: actualdata.map(o => Number(o.act_hrs))

Свойству data нужен только массив цифр, которые вы хотите отобразить на графике. Вот jsfiddle

Примечание: вы должны нормализовать свои данные во всех источниках данных на основе меток, которые вы используете в конфигурации labels диаграммы. Я имею в виду, что порядок цифр в вашем массиве данных должен соответствовать порядку меток.

...