Question

我试图使用ChartJS为一个微积分项目绘制一个像心脏的形状。我不太确定ChartJS是否可以绘制方程式，但我希望有人在某处做过。我有这两个方程y =（1-（x-1）^ 2）^（1/2）+ 2，y = -3（1-x ^（1/2）•2 ^（ - 1/2 ））^（1/2）+2，当你绘制这两个方程时，它们会形成半个心形（在Ti-84上做）。我想用ChartJS绘制这些方程式，但我不确定如何这样做。我尝试使用数据值进行绘图，无论x = y是什么，但是它要求我将曲线图的底部曲折回来，但是图表不会合作。我附上了图片应该看起来如何看的图像（使用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中看到这一点。

如何使用ChartJS绘制方程？

1 个答案: