ChartJS를 사용하여 방정식을 그리는 방법은 무엇입니까?

Question

저는 미적분 프로젝트를 위해 ChartJS를 사용하여 모양과 같은 마음을 그리려고합니다. ChartJS가 방정식을 그릴 수 있는지에 대해서는 너무 확신 할 수 없지만 다른 누군가가 어딘가에서 해보았 으면 좋겠다. 나는이 두 방정식을 가지고있다. y = (1- (x-1)^2)^(1/2) +2, y = -3 (1-x^(1/2) · 2 ^))^(1/2) +2, 그리고이 두 방정식을 그래프로 만들 때, 그들은 심장 모양의 반을 만듭니다 (Ti-84에서 그랬습니다). ChartJS를 사용하여 이러한 방정식을 플롯하고 싶습니다. 그러나 어떻게해야하는지 확신 할 수 없습니다. 나는 x = 무엇이든 상관없이 데이터 값을 사용하여 플로팅을 시도했지만 그래프의 바닥을 뒤쪽으로 휘 두르기를 요구하지만 chartjs는 협조하지 않을 것이다. 그래프가 어떻게 보이는지 (GeoGebra 사용) 이미지를 첨부했습니다. 누구든지 도와 줄 수 있다면 알려주세요. 사람이 데이터 만 플롯을 사용하여 이미지처럼 하단의 그래프 곡선을 만드는 방법을 알아낼 수 있다면 Plotted equations geogebra

또한 여기에 공유하십시오, 내 코드입니다 : D

<script> 
     var ctx = document.getElementById("myChart"); 
     var myChart = new Chart(ctx, { 
      type: 'line', 
      data: { 
       labels: ["0", "1", "2", "3", "4", "5", "6"], 
        datasets: [{ 
         label: 'Equation Plotted', 
         data: [2, 3, 2, 0], 
         backgroundColor: [ 
          'rgba(123, 83, 252, 0.8)', 
          'rgba(123, 83, 252, 0.8)', 
          'rgba(123, 83, 252, 0.8)', 
          'rgba(123, 83, 252, 0.8)', 
          'rgba(123, 83, 252, 0.8)', 
          'rgba(123, 83, 252, 0.8)' 
         ], 
         borderColor: [ 
          'rgba(33, 232, 234, 1)', 
          'rgba(33, 232, 234, 1)', 
          'rgba(33, 232, 234, 1)', 
          'rgba(33, 232, 234, 1)', 
          'rgba(33, 232, 234, 1)', 
          'rgba(33, 232, 234, 1)' 
         ], 
         borderWidth: 1 
        }], 
       }, 
       options: { 
        scales: { 
         yAxes: [{ 
          ticks: { 
           beginAtZero: true 
          } 
         }] 
        } 
       } 
      }); 
    </script> 

Answer 1

이 작업을 수행하기 위해 chart.js 각 점에 대한 x 및 y 값을 정의하는 선형 차트의 대체 데이터 형식을 사용해야합니다. 또한 x 축과 y 축 (눈금)을 모두 선형 눈금으로 구성해야합니다. 마지막으로, 심장 모양이 좋게 보이도록 곡선의 하단 부분 (두 번째 방정식)에 더 많은 점을 정의해야 할 것입니다.

다음은 위에서 언급 한 모든 것을 적용하는 구성 예입니다. 또한 나는 좋은 관점의 심장을 얻기 위해 축 최소값/최대 값을 가지고 노는 것에 대해 언급하고 싶다.

var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
    datasets: [{ 
     label: 'Equation Plotted', 
     data: [{ 
     x: 0, 
     y: 2 
     }, { 
     x: 1, 
     y: 3 
     }, { 
     x: 2, 
     y: 2 
     }, { 
     x: 1.02, 
     y: 0.4 
     }, { 
     x: 0, 
     y: -1 
     }], 
     backgroundColor: [ 
     'rgba(123, 83, 252, 0.8)', 
     'rgba(123, 83, 252, 0.8)', 
     'rgba(123, 83, 252, 0.8)', 
     'rgba(123, 83, 252, 0.8)', 
     'rgba(123, 83, 252, 0.8)', 
     'rgba(123, 83, 252, 0.8)' 
     ], 
     borderColor: [ 
     'rgba(33, 232, 234, 1)', 
     'rgba(33, 232, 234, 1)', 
     'rgba(33, 232, 234, 1)', 
     'rgba(33, 232, 234, 1)', 
     'rgba(33, 232, 234, 1)', 
     'rgba(33, 232, 234, 1)' 
     ], 
     borderWidth: 1 
    }], 
    }, 
    options: { 
    scales: { 
     xAxes: [{ 
     type: 'linear', 
     position: 'bottom', 
     ticks: { 
      min: -1, 
      max: 8, 
      stepSize: 1, 
      fixedStepSize: 1, 
     } 
     }], 
     yAxes: [{ 
     ticks: { 
      min: -2, 
      max: 4, 
      stepSize: 1, 
      fixedStepSize: 1, 
     } 
     }] 
    } 
    } 
}); 

이 동작은 codepen example에서 볼 수 있습니다.