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

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

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

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

HII Nguyễn, 27.12.2016 в 02:11 (источник)

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
                }
            }]

        }
    }
});