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

5b4886b55ed6b776556330.png
Решил использовать Chart.js. Получилось вот, что: 5b48873eca3d2654885984.png
Код:
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
                    
                
			}
        }
    });
  • Вопрос задан
  • 124 просмотра
Пригласить эксперта
Ответы на вопрос 2
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Получилось вот, что

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

Рекомендую закинуть код на https://jsfiddle.net или https://codepen.io
Ответ написан
Sanasol
@Sanasol Куратор тега JavaScript
нельзя просто так взять и загуглить ошибку
Ну так у вас точки то другие, для обоих осей вы делаете точки с одинаковым шагом, когда как на картинке явно видно что точки стоят в разное время, а не одинаково.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы