我如何通过x轴和y轴移动一个点，而曲线在chart.js线形图中没有改变

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?

本文关键字：chart js 曲线 改变 轴和 何通过 移动 一个      更新时间：2023-09-26

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

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

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

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

假设你有Chart.js, jQuery和jQuery- ui 

<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"))
        }
    }
});

提琴- http://jsfiddle.net/tjvz8c5o/

相关文章：