如何在折线图的Chartjs中根据用户输入动态改变Y轴值
how to change Y axis value dynamically based on user input in Chartjs for Line chart?
我正在尝试使用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
相关文章:
- 使用javascript搜索具有用户输入的数组
- React Native通过Navigator将用户输入数据传递到选项卡栏IOS中的组件
- 我想在AngularJS应用程序中创建一个输入数字框,用户不应该在该框上键入十进制数字.(一个整数输入框)
- 如何使用JavaScript中的用户输入创建序列/序列
- 如何在用户输入时实例化数组
- 如何从客户端的数组中获取用户输入和返回值
- 如何在用户输入 javascript 时更改值
- 如何从多个不同的html页面获得mongodb文档的用户输入
- 阻止用户将脚本输入wordpress post
- PayPal按钮是否有一个简单的选项,其中金额基于一些用户输入
- 从表单中获取用户输入执行计算(操作顺序)并输出回该表单
- 我确实有一个表单,如果用户输入了输入,它应该检查否定或空的输入框,并抛出一条警告消息
- 用于输入用户信息的动态PHP代码
- 在MongoDB中输入用户名数组,并返回相同大小的id数组,对于不存在的用户名为null或false
- 如何通过文本字段输入用户数据,然后在文本字段的正下方显示
- 脚本自动输入用户凭据
- 如何获取用户文本输入用户创建输入的值,jQuery
- 在网站服务器上存储表单/输入/用户首选项数据有哪些不同的方法?
- 使用if语句输入用户文本
- 不能在indexedDB中输入用户信息后立即提取用户信息