Диаграмма JS Столбчатая диаграмма с динамическими данными c - PullRequest
Новая
       52

Диаграмма JS Столбчатая диаграмма с динамическими данными c

0 голосов
/ 01 мая 2020

Я пытаюсь создать столбчатую диаграмму с накоплением, чтобы показать открытые вакансии по неделям в году, то есть у job1 есть 10 рабочих мест, у job2 есть 5 рабочих мест, поэтому всего будет 15 для недели 1 и c. Я извлекаю данные динамически через соединение OCI, и график загружает данные, однако я изо всех сил пытаюсь заставить их стать сложенными и иметь ось x как неделю года.

Здесь мой запрос ... 

$query = sprintf("select job1, job2, job3, job4, WEEK
from table1");

Этот результат даст мне итоги каждой работы и недели в году.

Вот данные графика ... 

$(document).ready(function(){
$.ajax({
  url: "getBarChartStatusData.php",
  method: "POST",
  success: function(data) {
    //console.log(data);
    var CustomerModel = [];
    var DaysOut = [];
    for(var i in data) {
      DaysOut.push(data[i].job1);
      DaysOut.push(data[i].job2);
      DaysOut.push(data[i].job3);
      DaysOut.push(data[i].job4);
      CustomerModel.push("job1");
      CustomerModel.push("job2");
      CustomerModel.push("job3");
      CustomerModel.push("job4");
    }
    $('#myChart1').remove();
    $('#piechartReason').append('<canvas id="myChart1"></canvas>');
    var chartdata = {
      labels: CustomerModel,
      datasets : [
        {
          label:'Total Jobs' ,
          backgroundColor: "#22aa99",
          borderColor: "#22aa99",
          hoverBackgroundColor: "#22aa99",
          hoverBorderColor: "#22aa99",
          data: DaysOut
        },
      ]
    };
    var ctx = $("#myChart1");
    var barGraph = new Chart(ctx, {
      type: 'bar',
      data: chartdata,
      options: {
        legend: {
          display: false
       },
        tooltips: {
          enabled: true
       },
      scales: {
          xAxes: [{
            scaleLabel: {
            stacked: true,
            display:true,
            fontSize:16,
            padding: 20,
            labelString:'Week',
            fontStyle: "bold"
           },
           ticks: {
                  autoSkip: false,
                  padding: 20,
                  fontSize:10
              }
          }],
          yAxes: [{
            scaleLabel: {
            stacked: true,  
            display: true,
            fontSize: 16,
            labelString:'Total Jobs',
            fontStyle: 'bold'
           },
           ticks: {
               beginAtZero: true,
               userCallback: function(label, index, labels) {
                   // when the floored value is the same as the value we have a whole number
                   if (Math.floor(label) === label) {
                       return label;
                   }
               },
           }
          }]
      },
    }
    });
  },
  error: function(data) {
    console.log(data);
  }
});
});

Я добавил 'stacked: true' к обеим осям x и y, но не уверен, что еще мне нужно сделать, поскольку я изо всех сил пытаюсь найти много учебников по этому вопросу.

...