Javascript 在chart.js折线图中曲线未更改的情况下，如何在x轴和y轴上移动点？

我有一个y=x^2的方程来绘制曲线图，我正在使用chart.js，我已经绘制了曲线，我有一个滑块，用户在其中输入x值

当用户滑动滑块时，将生成一个x值，输入方程式并生成y值

---

我想要的是，在绘制曲线时不进行更改，我用新点（x，y）创建一个新点，并将其放置在曲线上，每当用户更改x值时，该点在曲线上移动，以转到滑动事件中的正确位置

，将点从现有位置移动到新位置

假设您有Chart.js、jQuery和jQuery UI

HTML

<canvas id="myChart" height="300" width="800"></canvas>
<div id="slider"></div>

脚本

// y = fn(x)
function myFunction(x) {
    return Math.pow(x, 2);
}

// construct data
var labels = [];
var data = [];
for (var i = 0; i <= 10;) {
    labels.push(i);
    data.push(myFunction(i));
    i += 0.25;
}


// move point to position x in myChart
function updateChartPoint(myChart, xValue) {
    var ctx = myChart.chart.ctx;
    var scale = myChart.scale;
    var scaling = (scale.width - (scale.xScalePaddingLeft + scale.xScalePaddingRight)) / (scale.xLabels[scale.xLabels.length - 1] - scale.xLabels[0]);

    // cancel existing animations
    if (myChart.animationLoop)
        clearInterval(myChart.animationLoop);

    // figure out where we want to go
    var xTarget = Math.round(scale.xScalePaddingLeft + xValue * scaling);
    var xCurrent;
    if (myChart.point)
        xCurrent = myChart.point.x;
    else
        xCurrent = xTarget;
    var increment = (xTarget - xCurrent) / 30;

    myChart.animationLoop = setInterval(function () {
        myChart.point = {
            x: xCurrent,
            y: scale.calculateY(myFunction((xCurrent - scale.xScalePaddingLeft) / scaling))
        }

        myChart.update();

        ctx.beginPath();
        ctx.arc(myChart.point.x, myChart.point.y, 5, 0, 2 * Math.PI, false);
        ctx.fillStyle = 'red';
        ctx.fill();

        // move / stop moving
        if (Math.abs(xTarget - xCurrent) <= Math.abs(increment))
            clearInterval(myChart.animationLoop);
        else
            xCurrent += increment;
    }, 5);
}


$("#slider").slider({
    min: 0,
    max: 10,
    step: 0.1,
    value: 5
});


var data = {
    labels: labels,
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: data
        }
    ]
};

var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data, {
    showTooltips: false,
    pointDot: false,
    // the initial setting of the point
    onAnimationComplete: function () {
        if (!this.point) {
            var chart = this;
            chart.options.animation = false;

            $('#slider').slider("option", "slide", function (event, ui) {
                updateChartPoint(chart, ui.value)
            })

            updateChartPoint(chart, $('#slider').slider("option", "value"))
        }
    }
});

//y=fn（x）
函数myFunction（x）{
返回Math.pow（x，2）；
}
//构造数据
var标签=[]；
var数据=[]；
对于（var i=0；我可以向您发布到目前为止的代码。添加到它比从头开始构建它更容易。干杯！
point.x=x；
point.y=x^2；
？如何将画布中的红色圆圈作为移动点来添加事件悬停以显示工具提示？@potatoPeering我认为使用chartjs代码。介意把它作为一个单独的问题发布吗？我会在几个小时内尝试一下-同时你也可以让其他人参与进来。干杯！当我改变了方程，点没有在弧上移动时，我该怎么办？你可以把你的方程插入上面的小提琴中，我们可以看一下。或者你做sa我的东西，并张贴它作为一个单独的问题（一定要包括代码以及在问题中除了小提琴）太，因为你的新问题是，为什么这不工作，当你有一个不同的方程。你的方程是什么顺便说一句？干杯！我的新方程是Y=log（x/（x-1000*（4/100）/12））/log（1+（4/100）/12）但是我还是解决了这个问题。。