ChartJSを使って方程式をプロットする方法は？

Question

私はCalculusプロジェクトのChartJSを使用して、心臓のような形を描こうとしています。 ChartJSでも方程式をプロットすることができるのかどうかはわかりませんが、どこかで誰かがそれをやり遂げたと思っています。私はこれら2つの方程式y =（1-（x-1）^ 2）^（1/2）+2とy = -3（1-x^））^（1/2）+2であり、これらの2つの方程式をグラフ化すると、半分の心臓の形状になります（Ti-84で行いました）。私はChartJSを使ってそれらの方程式をプロットしたいと思いますが、どうやってそれを行うのかは分かりません。私はデータ値を使ってプロットしようとしましたが、x =どんなyでもグラフの一番下を曲線に戻す必要がありますが、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軸（目盛り）の両方を線形目盛りに設定する必要があります。最後に、おそらく、カーブの底部に沿ってより多くの点を定義する必要があります（第2の式）。

ここでは、上記のすべてのことを適用する設定例を示します。私はまた、軸の最小値/最大値で遊んで、見栄えのよい心臓を得ることを言及したいと思います。

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で見ることができます。