Как на одном холсте вывести несколько графиков с независимыми координатами по оси X?

Question

[dch3]

Требуется на один холст вывести два, например линейных графика, у которых будут различны как координаты Y, так и координаты Х.

Нашел следующее решение в доках Chart.js:

return new Chart (context, {
     type: typeOfChart,
     data: {
        labels: xData,  /** общие координаты по оси Х для обоих графиков */
        datasets: [
        {
           label: legend,
           data: yData  /** координаты по оси Y  первый график*/
        }, {
           label: legend,
           data: yData2  /** координаты по оси Y второй график */
        }
       ]
    }
});

Этот код строит два графика, по оси X оба они имеют одинаковые координаты.
Возможно ли построить два графика со своими координатами как по X, так и по Y?

Comments

[sharpsss]

А можно картинку того что вы хотите получить а итоге?

[Ankhena]

Требуется на один холст вывести два, например линейных графика, у которых будут различны как координаты Y, так и координаты Х.

Боюсь спросить что таким образом можно сравнить...

Но вы можете просто наложить один график на другой, например, гридом или абсолютом (это похуже).

[dch3]

sharpsss,
что-то вроде этого


только, что-бы один из графиков начинался не с апреля, а с мая (по оси X)

Answer 1

[0xD34F]

Устанавливаете тип графика scatter, в настройках наборов данных указываете showLine: true. Например:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.0/chart.umd.js"></script>
<canvas id="chart"></canvas>

const createDataset = (color, label, baseY) => ({
  borderColor: color,
  label,
  showLine: true,
  data: Array.from({ length: 10 }, (_, i) => ({
    x: 10 * (i + (Math.random() - 0.5)) | 0,
    y: baseY + Math.random() * baseY | 0,
  })),
});

new Chart(document.querySelector('#chart'), {
  type: 'scatter',
  data: {
    datasets: [ 
      createDataset('red', 'hello, world!!', 50),
      createDataset('green', 'fuck the world', 100),
      createDataset('blue', 'fuck everything', 200),
    ],
  },
});

Comments

[dch3]

@0xD34F
Спасибо!
Вроде то решение, которое искал. Сейчас буду пробовать