0

Есть задача сделать такой график.

введите сюда описание изображения

У меня на данный момент вышло так:

введите сюда описание изображения

Это сам config:

const config = {
    type: 'line',
    data: {
      labels: ['12am', '3am', '6am', '9am', '12pm', '3pm', '6pm', '9pm', '12pm'],
      datasets: [
        {
          data: [0, 5, 10, 13, 14, 24, 30, 20, 6],
          backgroundColor: '#16A2DC',
          borderColor: '#16A2DC',
          tension: 0.4,
        },
      ],
    },
    options: {
      plugins: {
        legend: {
          display: false,
        },
      },
      scales: {
        y: {
          beginAtZero: true,
          min: 0,
          max: 60,
          ticks: {
            stepSize: 15,
            callback: (value: number) => {
              if (value >= 60) return '1h+';
              return value + 'min';
            },
          },
        },
        x: {
          beginAtZero: true,
        },
      },
      responsive: true,
    },
  };

Искал везде - не нашёл!

1 ответ 1

2

С типом графика line точки всегда идут с фиксированным шагом по оси X. Тип scatter с параметром showLine: true больше подходит для вашей задачи, но данные задавать нужно парами {x, y}. В примере я поставил иксы наобум.

const config = {
  type: 'scatter',
  data: {
    datasets: [{
      data: [
        { x: 0, y: 0 },
        { x: 1, y: 5 },
        { x: 1.5, y: 10 },
        { x: 2.5, y: 13 },
        { x: 4, y: 14 },
        { x: 4.5, y: 24 },
        { x: 5.5, y: 30 },
        { x: 7, y: 20 },
        { x: 8, y: 6 }
      ],
      showLine: true,
      backgroundColor: '#16A2DC',
      borderColor: '#16A2DC',
      tension: 0.4,
    }],
  },
  options: {
    plugins: {
      legend: {
        display: false
      },
    },
    scales: {
      x: {
        beginAtZero: true,
        ticks: {
          callback: (label) => `${label}h`
        }
      },
      y: {
        beginAtZero: true,
        min: 0,
        max: 60,
        ticks: {
          stepSize: 15,
          callback: (label) => (label < 60) ? `${label}min` : '1h+'
        }
      }
    },
    responsive: true
  }
};

const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.0/chart.js" integrity="sha512-LlFvdZpYhQdASf4aZfSpmyHD6+waYVfJRwfJrBgki7/Uh+TXMLFYcKMRim65+o3lFsfk20vrK9sJDute7BUAUw==" crossorigin="anonymous"></script>
<canvas id="myChart" width="400" height="100"></canvas>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.