자바 스크립트 chart.js의 산점도에 첫 번째 점이 표시되지 않습니다.

산산이 음모를 만들었습니다. 아래 코드가 있습니다. (0,0)의 점은 차트에 표시되지 않습니다 (실제로는 x = 0, y는 아무 것도 될 수 있습니다). 그 지점을 가리키면 툴팁이 표시됩니다. 또한 옵션에 제목을 설정하면 제목이 페이지에 표시되지 않습니다.자바 스크립트 chart.js의 산점도에 첫 번째 점이 표시되지 않습니다.

또한 어떻게하면 x 축과 y 축에 레이블을 추가 할 수 있습니까?

누구든지 내가 뭘 잘못하고 있는지 알아?

감사 크롬 61, 62 페이지의 스크린 샷에

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

내가 :

capture

출처

2017-10-20 omega

http://www.chartjs.org/docs/latest/axes/labelling .html 축 레이블 – cowbert

대신 0 .01 값을 사용하여 주위 펑키 작품이다. 또한 X 및 Y 축에 레이블을 붙일 부분을 포함 시켰습니다. 나는 파이어 폭스에있어 모두가

편집 잘 보이는 : 포함 부정적인 시작 축 값

<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 대신 0.1이 표시됩니다. – omega

-0.5 또는 -1에서 축을 시작하는 방법이 있습니까? – omega

또한 제목이 표시됩니까? – omega

자바 스크립트 chart.js의 산점도에 첫 번째 점이 표시되지 않습니다.

답변

관련 문제