Первая точка на точечной диаграмме на JavaScript chart.js не отображается

1

Я создал график рассеяния, это код ниже. Точка в (0,0) не отображается на диаграмме (на самом деле это происходит до тех пор, пока x = 0, y может быть любым). Если я нахожусь на этом этапе, всплывающая подсказка показывает. Также, когда я устанавливаю заголовок в параметрах, заголовок не отображается на странице.

Также как я могу поместить метку на оси x и y?

Кто-нибудь знает, что я делаю неправильно?

Спасибо

 <!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
</head>

<body>


<script>
    var canvas = document.createElement('canvas');
    canvas.width = 400;
    canvas.height = 400;

    document.body.appendChild(canvas);

    var coordinates = [
        {x:0,y:0}, {x:5,y:5}, {x:15,y:15}, {x:20,y:20}, {x:25,y:25}
    ];

    var d1 = coordinates.slice(0,3);
    var d2 = coordinates.slice(3,coordinates.length);
    var data = {
        datasets: [
            {
                label: "Most Relavant",
                borderColor: 'red',
                backgroundColor : 'rgba(255,0,0,0.5)',
                data: d1
            },
            {
                label: "Others",
                borderColor: 'blue',
                backgroundColor : 'rgba(0,0,255,0.5)',
                data: d2
            }
        ]
    };

    new Chart(canvas, {
        type: 'scatter',
        data: data,                
        title:{
            display:true,
            text:'Chart.js Line Chart'
        },
        options: {
            responsive : false,
            scales: {
                xAxes: [{
                    type: 'linear',
                    position: 'bottom'
                }]
            }
        }
    });
</script>
</body>

</html>

Я нахожусь на хроме 61 и 62. Смотрите скриншот:

Изображение 174551

Теги:
chart.js

1 ответ

1
Лучший ответ

Использование значения.01 вместо 0 - фанковая работа. Также включили детали для обозначения X и Y-оси. Я нахожусь в Firefox, и все выглядит нормально

EDIT: включены значения отрицательной начальной оси

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
</head>

<body>


<script>
    var canvas = document.createElement('canvas');
    canvas.width = 400;
    canvas.height = 400;

    document.body.appendChild(canvas);

    var coordinates = [
        {x:0,y:0}, {x:5,y:5}, {x:15,y:15}, {x:20,y:20}, {x:25,y:25}
    ];

    var d1 = coordinates.slice(0,3);
    var d2 = coordinates.slice(3,coordinates.length);
    var data = {
        datasets: [
            {
                label: "Most Relavant",
                borderColor: 'red',
                backgroundColor : 'rgba(255,0,0,0.5)',
                data: d1
            },
            {
                label: "Others",
                borderColor: 'blue',
                backgroundColor : 'rgba(0,0,255,0.5)',
                data: d2
            }
        ]
    };

    new Chart(canvas, {
        type: 'scatter',
        data: data,                
        title:{
            display:true,
            text:'Chart.js Line Chart'
        },
        options: {
            responsive : false,
            scales: {
                xAxes: [{
                    ticks: {
                      min: -2,
                      stepSize: 5
                    },
                    type: 'linear',
                    position: 'bottom',
                    scaleLabel: {
                      display: true,
                      labelString: 'X axis label'
                    }
                }],
                yAxes: [{
                    ticks: {
                      min: -2,
                      stepSize: 5
                    },
                    scaleLabel: {
                      display: true,
                      labelString: 'Y axis label'
                    }
                }]
            }
        }
    });
</script>
</body>
Поделиться
  • 0
    Благодарю. Хак 0,1 работает для визуализации, но когда вы наводите курсор мыши, он говорит 0,1 вместо 0, что странно.
  • 0
    Есть ли способ заставить ось начинать с -0,5 или -1?
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню