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

问题描述：

我创建了散点图，这是下面的代码。（0,0）处的点不显示在图表上（实际上只要x = 0，y就可以是任何东西）。如果我徘徊在这一点，工具提示确实显示。另外，当我在选项中设置标题时，标题不会显示在页面上。JavaScript上的散点图上的第一点chart.js没有显示

另外我怎样才能把标签放在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

http://www.chartjs.org/docs/latest/axes/labelling .html用于轴标签 – cowbert

答

使用0.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>

谢谢。 0.1黑客适用于可视化，但是当你将鼠标悬停在它上面时，会说0.1而不是0，这很奇怪。 – omega

有没有办法让轴从-0.5或-1开始？ – omega

也有标题显示给你？ – omega

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

相关推荐