Chart js данные в виде даты?

Question

Мне нужно сделать график где вертикальная ось- это время (например 12:45) а горизонтальная - это даты. Суть в том - чтобы отобразить в какое время юзер заходил в ту или иную дату Вот что какие данные передаются:

для х:

для y:

Вот код на JQUERY:

const response = {
  datesLabel: ["01-06-2020", "02-06-2020", "03-06-2020", "04-06-2020", "05-06-2020", "06-06-2020", "07-06-2020", "08-06-2020", "09-06-2020", "10-06-2020", "11-06-2020", "12-06-2020", "13-06-2020", "14-06-2020", "15-06-2020", "16-06-2020", "17-06-2020", "18-06-2020", "19-06-2020", "20-06-2020", "21-06-2020", "22-06-2020", "23-06-2020", "24-06-2020", "25-06-2020", "26-06-2020", "27-06-2020"],

  valuesLabel: ["12:07", "00:00", "12:07", "00:00", "12:07", "00:00", "12:07", "00:00", "12:07", "00:00", "00:00", "00:00", "00:00", "12:08", "12:08", "12:08", "00:00", "00:00", "12:08"],
};

var config = {
  type: 'line',
  data: {
    labels: response.datesLabel, //это для х,
    datasets: [{
      label: "Success",
      borderColor: "rgba(255, 180, 0)",
      pointBackgroundColor: "rgba(180, 255, 0)",
      pointBorderColor: 'rgba(0, 0, 0, 0)',
      pointBorderWidth: 1,
      borderWidth: 1,
      pointRadius: 3,
      pointHoverRadius: 4,
      data: response.valuesLabel, // это для у,
      fill: false
    }]
  },
  options: {
    responsive: true,
    title: {
      display: false,
      text: 'Line Chart'
    },
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: false,
          labelString: '6 months forecast'
        },
        gridLines: {
          display: true,
          color: "#f2f2f2"
        },
        ticks: {
          beginAtZero: true,
          fontSize: 11
        }
      }],
      yAxes: [{
        type: 'time',
        time: {
          displayFormats: {
            hour: 'HH:mm'
          },
          unit: 'hour'
        },
        display: true,
        scaleLabel: {
          display: false,
          labelString: 'Profit margin (approx)'
        },
        gridLines: {
          display: true,
          color: "#f2f2f2"
        },
        ticks: {
          beginAtZero: false,
          fontSize: 11
        }
      }]
    }
  }
};
new Chart($("#lineChart > canvas").get(0).getContext("2d"), config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>

<div id="lineChart">
  <canvas></canvas>
</div>

Но у меня никак не получается сделать этот график. Что я делаю не так?

БЛОГ НА HUSL

Chart js данные в виде даты?

Ответы (0 шт):