javascript - 如何根据折线图的 Chartjs 中的用户输入动态更改 Y 轴值？

Question

我正在尝试使用 chartjs 绘制折线图。现在我正在努力根据用户输入更改 y 轴值。所以请帮我加载值。如能详细解答，将不胜感激。我找到了一些答案，但它只针对条形图给出，但我需要折线图的答案。

  var data = {
                labels : ["January", "February",    "March",   "April","May","June","July","August","September","October","November","December"],
                datasets : [
                    {
                        fillColor : "rgba(151,187,205,0.5)",
                        strokeColor : "rgba(151,187,205,1)",
                        pointColor : "rgba(151,187,205,1)",
                        pointStrokeColor : "#fff",
                        data : [10,48,40,19,96,27,85,60,15, 30, 80,75],
                        title : "First data"
                    }
                ]
            }
      var ctx = document.getElementById("myChart").getContext("2d");
       var myNewChart = new Chart(ctx).Line(data,options);
    });

 var options = {
       inGraphDataShow: true,
       inGraphDataPaddingX: 3,
       inGraphDataPaddingY: 3,
        inGraphDataAlign : "left",
        inGraphDataVAlign : "bottom",
        inGraphDataRotate : 0,
        inGraphDataFontFamily: "'Arial'",
        inGraphDataFontSize: 12,
        inGraphDataFontStyle: "normal",
        inGraphDataFontColor: "#666",
        scaleOverlay: false,
        scaleOverride: false,
        scaleSteps: null,
        scaleStepWidth: 20,
        scaleStartValue: null,
        // seting x axis value.
        yAxisLabel : "Salary",
        yAxisFontFamily : "'Arial'",
        yAxisFontSize : 16,
        yAxisFontStyle : "normal",
        yAxisFontColor : "#666",
        xAxisLabel : "Month",
      xAxisFontFamily : "'Arial'",
        xAxisFontSize : 16,
        xAxisFontStyle : "normal",
        xAxisFontColor : "#666",
        // y axis value
        scaleLineColor: "rgba(0,0,0,.1)",
        scaleLineWidth: 1,
        scaleShowLabels: true,

        scaleFontFamily: "'Arial'",
        scaleFontSize: 12,
        scaleFontStyle: "normal",
        scaleFontColor: "#666",
        scaleShowGridLines: true,
        scaleXGridLinesStep : 1,
        scaleYGridLinesStep : 1,
        scaleGridLineColor: "rgba(0,0,0,.05)",
        scaleGridLineWidth: 1,
        showYAxisMin: true,      // Show the minimum value on Y axis (in original version, this minimum is not displayed - it can overlap the X labels)
        rotateLabels: "smart",   // smart <=> 0 degre if space enough; otherwise 45 degres if space enough otherwise90 degre; 
        // you can force an integer value between 0 and 180 degres
        logarithmic: false, // can be 'fuzzy',true and false ('fuzzy' => if the gap between min and maximum is big it's using a logarithmic y-Axis scale
        scaleTickSizeLeft: 5,
        scaleTickSizeRight: 5,
        scaleTickSizeBottom: 5,
        scaleTickSizeTop: 5,
        bezierCurve: true,
        pointDot: true,
        pointDotRadius: 4,
        pointDotStrokeWidth: 2,
        datasetStroke: true,
        datasetStrokeWidth: 2,
        datasetFill: true,
        animation: true,
        animationSteps: 60,
        animationEasing: "easeOutQuart",
        onAnimationComplete: null,
            }

Answer 1

假设我们要将 X-label 'March' 的 Y 值从 40 更改为 50。首先将第一个数据集 'March' 的值更改为 50。现在调用 update 函数将“March”的位置从 40 动画化到 50。

myNewChart.datasets[0].points[2].value = 50;   //change the value  
myNewChart.update();   //update the chart