如何在 chart.js 折线图中的曲线未更改的情况下通过 x 轴和 y 轴移动一个点？

Question

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

当用户滑动滑块时生成 x 值输入方程并生成 y 值

我想要的是在不更改曲线的情况下绘制我用新点 (x,y) 创建一个新点并将其放在曲线上，每当用户更改 x 值时，该点就会移动到曲线去它的正确位置

Answer 1

在幻灯片事件中将您的点从现有位置移动到新位置。

假设您有 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"))
        }
    }
});

Fiddle - http://jsfiddle.net/tjvz8c5o/

如何在 chart.js 折线图中的曲线未更改的情况下通过 x 轴和 y 轴移动一个点？

How can i move a point through both x-axis and y-axis while the curve is not changed in a chart.js line graph?

javascript

canvas

chart.js