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