Как построить такой график?

Question

[Влад Державин]

Решил использовать Chart.js. Получилось вот, что:
Код:

var ctx = document.getElementById('myChart').getContext('2d');
    Chart.defaults.global.defaultFontColor = '#d1d1d1';
    Chart.defaults.global.defaultFontSize = '16';
    Chart.defaults.global.defaultFontFamily = 'Montserrat';
    Chart.defaults.global.defaultFontStyle = 'bold';
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',
    
        // The data for our dataset
        data: {
            labels: ["JAN", "FEB", "MAR", "APR", "MAY"],
            
            datasets: [
                {
                    label: "My First dataset",
                    backgroundColor: '#FDE52C',
                    fill: false,
                    borderColor: '#FDE52C',
                    borderWidth: 3,
                    data: [10,29,37,32],
                },
                {
                    label: "My First dataset",
                    backgroundColor: '#002E5B',
                    fill: false,
                    borderColor: '#002E5B',
                    borderWidth: 3,
                    data: [10,29,32,50],
                }
            ]
        },
    
        options: {
            responsive: true,
            legend: {
                display: false,
            },
            scales: {
                xAxes: [{
                    gridLines: {
                        display: false,
                        drawBorder: false
                    } ,
                }],
                yAxes: [{
                    gridLines: {
                        display: false,
                        drawBorder: false
                    },
                    ticks: {
                        min: 10,
                        max: 50,
                        stepSize: 10
                    }
                }]
            },
            elements: {
				line: {
					tension: 0.000001
                },
                point: false
                    
                
			}
        }
    });

Comments

[Михаил]

и что вас не устраивает? Вы хотите полной индентичности добиться или что?

Answer 1

[Максим Тимофеев]

Получилось вот, что

а если другие цифры поставить, совсем иначе получится. Вот ведь какая штука графики. Их вид зависит от того по каким данным их строишь.

Рекомендую закинуть код на https://jsfiddle.net или https://codepen.io

Comments

[Влад Державин]

Мм да) Я это понимаю. Но как вы видите, синий и желтый выходят из одной точки и идут примерно до 29. Как я и сделал в коде. Как сделать чтобы синий заходил в 29 на правее?

[Максим Тимофеев]

Влад Державин, задать ему другой x при y=29

[Влад Державин]

Максим Тимофеев, Спасибо. Но как это сделать?

[Михаил]

Влад Державин, на исходнике 29 у синего в марте, а у вас в феврале

[Влад Державин]

Я это понимаю. Но как изменить?

[Михаил]

Влад Державин, что-то вроде этого https://jsfiddle.net

[Влад Державин]

Михаил, Спасибо, большое! Поможете ещё расстояние между датами уменьшить. И точки для концов линий добавить.

[Михаил]

Влад Державин, насколько я помню точки в chatjs либо есть либо нет, нельзя их только в конце вывести. По поводу расстояния, в каком размере блока отрисуете такого размера график и будет.

[Влад Державин]

Михаил, Нашел решение maintainAspectRatio: false. Спасибо вам за помощь!

Answer 2

[Александр Аксентьев]

Ну так у вас точки то другие, для обоих осей вы делаете точки с одинаковым шагом, когда как на картинке явно видно что точки стоят в разное время, а не одинаково.