我正在尝试使用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标签“March”的Y值从40更改为50。首先将第一个数据集的“March”的值更改为50。
现在调用update函数可将“三月”的位置从40设置为动画。

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

关于javascript - 如何根据Chartjs中折线图的用户输入动态更改Y轴值?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23532791/

10-12 12:40
查看更多