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

來源

2017-10-20 omega

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>

來源

2017-10-20 20:42:26 pokeybit

謝謝。 0.1黑客適用於可視化，但是當你將鼠標懸停在它上面時，會說0.1而不是0，這很奇怪。 – omega

有沒有辦法讓軸從-0.5或-1開始？ – omega

也有標題顯示給你？ – omega

JavaScript上的散點圖上的第一點chart.js沒有顯示

回答

相關問題