Соедините 2 линии на графике с помощью chartjs

Я использовал chartjs, чтобы нарисовать мой график ниже

https://i.stack.imgur.com/kPmQ6.png

В моей диаграмме я хочу соединить линию 1 точки с точкой в другой линии, но я не могу найти решение
Пожалуйста, помогите мне!

1 ответ

  1. Перейти к точечным диаграммам . В точечной диаграмме вы можете рисовать независимые линии.Ниже приведен снимок
    Введите описание изображения здесь

    [ Пример-код]

    var scatterChart = new Chart(ctx1, {
        type: 'line',
        data: {
            datasets: [{
                label: 'Scatter Dataset',
                borderColor: "rgba(33,150,243,1)",
                  pointRadius : 0,
                data: [{
                    x: 2,
                    y: 22
                }, {
                    x: 2,
                    y: 28
                }]
            },
            {
                label: 'Scatter Dataset',
                borderColor: "rgba(33,150,243,1)",
                  pointRadius : 0,
                data: [{
                    x: 3,
                    y: 20
                }, {
                    x: 3,
                    y: 25
                }]
            },
            {
                label: 'Scatter Dataset',
                borderColor: "rgba(33,150,243,1)",
                  pointRadius : 0,
                data: [{
                    x: 4,
                    y: 21
                }, {
                    x: 4,
                    y: 27
                }]
            },
             {
                label: 'Scatter Dataset',
                fill : false,
                  pointRadius : 0,
                borderColor: "rgba(244,67,54,1)",
                data: [{
                    x: 2,
                    y: 25
                }, {
                    x: 3,
                    y: 23
                },{
                    x : 4,
                    y : 23
                }]
            }
            ]
        },
        options: {
            scales: {
                xAxes: [{
                    type: 'linear',
                    position: 'bottom',
                    ticks : {
                        max : 10,
                        beginAtZero : true
                    }
                }],
                yAxes: [{
                    ticks : {
                        max : 30,
                        beginAtZero : true
                    }
                }]
    
            }
        }
    });