如何在折线图的Chartjs中根据用户输入动态改变Y轴值

how to change Y axis value dynamically based on user input in Chartjs for Line chart?

本文关键字:输入 用户 动态 改变 轴值 折线图 Chartjs      更新时间:2023-09-26

我正在尝试使用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,
            }

假设我们想将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