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

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

如果在chart.js折线图中未更改曲线，如何在x轴和y轴上移动一个点？

1 个答案: