Отображение линейного графика за несколько месяцев с использованием графика. js - PullRequest
Новая
       20

Отображение линейного графика за несколько месяцев с использованием графика. js

1 голос
/ 27 февраля 2020

Мне нужно отобразить линейный график с двумя разными наборами данных на одном графике. После выполнения запроса я получил plan_plan и actual_plan следующей формы. 

plan_plan = 0: {label: "Feb-20", plan_hrs: "20"} 
            1: {label: "Oct-20", plan_hrs: "94"} 
actual_plan = 0: {label: "Mar-20", actual_hrs: "1"}

код javacript: 

   function show_Graph()
        {
            {
                var plandata = <?php echo json_encode($plan_plan); ?>;
                var actualdata = <?php echo json_encode($actual_plan); ?>;

                 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.plan_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.actual_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'
      }
      }]
    }
  }
});
 }}

Я хочу получить месяц в формате (Jan-20 ) по оси x, а затем данные plan_hrs и actual_hrs по оси y, которые можно отобразить в виде линейной диаграммы. А также должен отображать одну точку ввода, даже если нет точек данных для подключения. Я использовал теги скрипта: 

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

Но график не отображается, когда я включаю следующий скрипт для bootstrap: 

<script src="build/js/custom.min.js">

1 Ответ

0 голосов
/ 27 февраля 2020

Я могу помочь в разборе и отображении дат на xAxis, но, к сожалению, я не знаю Bootstrap.

Определите ваш xAxis следующим образом: 

xAxes: [{
  type: 'time',
  time: {
    parser: 'MMM-YY',
    unit: 'month',
    displayFormats: {
      month: 'MMM-YY'
    }
  }
}]

Диаграмма. js для внутреннего использования использует Момент. js, поэтому вы можете использовать следующие форматы дата / время для анализа и отображения даты. В вашем случае это 'MMM-YYD'. 

const plan_plan = [{label: "Feb-20", plan_hrs: "20"}, {label: "Oct-20", plan_hrs: "94"}]; 
const actual_plan = [{label: "Mar-20", actual_hrs: "1"}];

new Chart("scurve_chart", {
  type: 'line',
  data: {
    datasets: [{
        label: "Planned Hours",
        fill: false,
        borderColor: "rgba(255, 0, 0, 1)",
        data: plan_plan.map(o => ({ x: o.label, y: Number(o.plan_hrs)}))
      },
      {
        label: "Actual Hours",
        fill: false,
        borderColor: "rgba(0, 255, 0, 1)",
        data: actual_plan.map(o => ({x: o.label, y: Number(o.actual_hrs)}))
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        type: 'time',
        time: {
          parser: 'MMM-YY',
          unit: 'month',
          displayFormats: {
             month: 'MMM-YY'
          }
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> 
<canvas id="scurve_chart" height="90"></canvas>
...