JavaScript chart.js 散点图上的第一点未显示

Question

I created a scatter plot, this is the code below.我创建了一个散点图，这是下面的代码。 The point at (0,0) does not show on the chart (actually it happens as long as x=0, y can be anything). (0,0) 处的点不会显示在图表上（实际上，只要 x=0，y 就可以是任何值）。 If I hover on that point, the tooltip does show.如果我将鼠标悬停在该点上，工具提示会显示。 Also when I set a title in the options, the title does not show up on the page.此外，当我在选项中设置标题时，该标题不会显示在页面上。

Also how can I put a label on the x and y axis?另外如何在 x 和 y 轴上放置标签？

Does anyone know what I am doing wrong?有谁知道我做错了什么？

Thanks谢谢

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

I am on chrome 61 and 62. See screenshot:我在 chrome 61 和 62 上。看截图：

Answer 1

Using .01 value instead of 0 is a funky work around.使用 .01 值而不是 0 是一个时髦的解决方法。 Also have included the parts to label X and Y axis.还包括部件标记X和Y轴。 I'm on Firefox and all looks fine我在 Firefox 上，一切看起来都很好

EDIT: Included the negative start axis values编辑：包括在开局不利轴值

 <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 个解决方案

解决方案1
1 已采纳 2017-10-20 20:42:26

JavaScript chart.js 散点图上的第一点未显示

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-10-20 20:42:26

解决方案1
1 已采纳 2017-10-20 20:42:26