Question

我创建了一个散点图，这是下面的代码。（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>

我在chrome 61和62上。见截图：

capture

Answer 1

使用.01值而不是0是一个时髦的工作。还包括标记X和Y轴的部件。我在Firefox上看起来很好看

编辑：包括负起始轴值

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

关于JavaScript chart.js上的散点图的第一点没有显示

1 个答案: